Skip to main content
4 de 5
se añadieron 534 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 se quite el efecto de la primera imagen, y la segunda imagen mantenga su efecto hover. Que funcione como un input tipo radio, en este caso una imagen se mantendrá seleccionada.

    <body>


 <div class="container">
    <div class="imgicon images1">
        <label class="textlarge icono-educ">
        <input type="radio" name="cajaradio" value="Educación" style="">
            <p class="textradio">Educación</p>
        </label>
    </div>

    <div class="imgicon images2">
        <label class="textlarge icono-empren">
        <input type="radio" name="cajaradio" value="Emprendimiento" style="">
            <p class="textradio1">Emprendimiento</p>
        </label>
    </div>
</div>
    


    <style>
           .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'); 
    }
    .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');
                }
    }
  }); 
    </script>
        </body>
APRECode
  • 53
  • 1
  • 12