Skip to main content
5 de 5
se eliminaron 216 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.

<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <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>
</head>

<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>

<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