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'); } } });