Tengo un problema para mantener el efecto hover
cuando selecciono una imagen. El efecto no debe cambiar cuando se selecciona o se presiono fuera; en js logro almacenar en una variable "mensaje" lo seleccionado, pero no logro que se mantenga el efecto hover
, su apoyo por favor, estoy comenzando y les agradecería muchísimo.
<body>
<div class="container">
<div class="imgicon">
<label class="textlarge icono-educ ">
<input type="radio" name="cajaradio" value="Educación" style="display: none;">
<p class="textradio">Educación</p>
</label>
</div>
<div class="imgicon">
<label class="textlarge icono-empren">
<input type="radio" name="cajaradio" value="Emprendimiento" style="display: none;">
<p class="textradio1">Emprendimiento</p>
</label>
</div>
<div class="imgicon">
<label class="textlarge icono-gasmedi">
<input type="radio" name="cajaradio" value="Gastos Medicos" style="display: none;">
<p class="textradio2">Gastos Medicos</p>
</label>
</div>
</div>
<style>
.icono-educ, .icono-empren, .icono-gasmedi{
width: 80px;
height: 80px;
background-repeat: no-repeat;
transition:all 900ms;
margin: 30px;
}
[.icono-educ, .icono-empren, .icono-gasmedi]:hover{
color: #1A237E;
width: 80px;
height: 80px;
transition:all 900ms;
margin: 30px;
}
.icono-educ{
background-image: url('../icon/educ.png');
}
.icono-educ:hover{
background-image: url('../icon/educa.png');
}
.icono-empren{
background-image: url('../icon/emprend.png');
}
.icono-empren:hover{
background-image: url('../icon/emprendi.png');
}
.icono-gasmedi{
background-image: url('../icon/gastmed.png');
}
.icono-gasmedi:hover{
background-image: url('../icon/gastmedi.png');
}
</style>
<script>
$(function(){
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
var mensaje = $(this).val();
{
alert("Seleccionaste: "+ mensaje);
}
});
});
</script>
</body>