Skip to main content

Mantener efecto hover al seleccionarlo

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>
APRECode
  • 53
  • 1
  • 12