El problema aquí es cómo hacer que una casilla de verificación sea visible solo cuando:
- se cierne sobre
- Seleccionado
Enfoque:
la casilla de verificación no debe estar visible cuando no está seleccionada. Solo se vuelve visible cuando se pasa el cursor por encima de nuevo.
La solución al problema es simple. Podemos usar la propiedad de opacidad del elemento checkbox y manipular eso. Simplemente cambie el valor de opacidad de la casilla de verificación a 1 cuando se pase el cursor sobre el elemento de la casilla de verificación o cuando se seleccione, usando CSS. El valor predeterminado de opacidad debe ser 0 .
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Checkbox</title>
<style>
#box{
margin:50px;
width:50px;
height:50px;
border:2px solid black;
padding:10px;
}
.cardcheckbox {
opacity: 0;
}
.cardcheckbox:hover,
.cardcheckbox:checked {
opacity: 1;
}
</style>
</head>
<body>
<div id="box">
<div>
<input type="checkbox"
class="cardcheckbox"
align="right"/>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA