Skip to main content
3 de 5
se eliminaron 79 caracteres en el cuerpo
APRECode
  • 53
  • 1
  • 12

Mantener efecto hover al seleccionarlo

Tengo un problema para mantener el efecto hover, busco al hacer clic que la imagen mantenga el efecto hover, y si selecciono la otra imagen se remueva el efecto hover de la primera imagen y esta segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso las imágenes se mantendrían seleccionadas. Educación

<div class="imgicon images2">
    <label class="textlarge icono-empren">
    <input type="radio" name="cajaradio" value="Emprendimiento" style="">
        <p class="textradio1">Emprendimiento</p>
    </label>
</div>
.images1 { width: 80px; height: 80px; background-image: url('../icono/educacionp.png'); background-repeat: no-repeat; cursor: pointer; } .images1:hover { background-image: url('../icono/educacion.png'); cursor: pointer; } .clasehover { background-image: url('../icono/educacion.png'); }

.images2 { width: 80px; height: 80px; background-image: url('../icono/Emprendimientop.png'); background-repeat: no-repeat; } .images2:hover { background-image: url('../icono/Emprendimiento.png'); } .clasehover2 { background-image: url('../icono/Emprendimiento.png'); }

/* Cambio */

.container{ margin: 0; padding: 0; list-style: none; display: flex; justify-content:center; flex-wrap: wrap; } .container p{ margin-top:60px; font-size: 12px; cursor: pointer; }

.imgicon{ display: flex; justify-content: center; cursor: pointer; margin: 30px; }

.textlarge{ display: flex; } .imgicon input{ margin-top: 55px; margin-left: -30px; }

</style>


<script>

$('input[type="radio"]').click(function(){ if ($(this).is(':checked')) // var mensaje = $(this).val(); { //alert("Seleccionaste: "+ mensaje); if( $('.images1').hasClass('clasehover')) { $('.images1').removeClass('clasehover'); } else{ $('.images1').addClass('clasehover'); } } });

APRECode
  • 53
  • 1
  • 12