1

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>
2
  • Fijate de poner un código que permita hacer notar tu error, con lo que has puesto, intento replicarlo para ayudarte a buscar una solución, y no logro ver la problemática! saludos Commented el 6 jun. 2018 a las 17:00
  • Gracias por responder, lo que busco es que mantenga el efecto hover la imagen que clickeo, hasta el momento avance en JS: $(function(){ $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) var mensaje = $(this).val(); { alert("Seleccionaste: "+ mensaje); } }); });
    – APRECode
    Commented el 6 jun. 2018 a las 17:06

1 respuesta 1

1

Si no interpreté mal tu problema, podrías hacer lo siguiente;

$('.image').on('click',function(){

if( $(this).hasClass('clasehover') )
{
	$(this).removeClass('clasehover');
}
else{
$(this).addClass('clasehover');
}

});
.image
{
 width: 300px;
 height: 300px;
 background-image: url('https://cdn.sstatic.net/Sites/es/img/[email protected]'); 
}
.image:hover
{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);  
}
.clasehover
{
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);  
}
<div class="image">

</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

El estilo cuando está la imagen en :hover lo definís nuevamente en otra clase también, en el ejemplo sería clasehover

De este modo, bastaría con detectar el evento click con JavaScript y agregar dicha clase al momento de hacer click en la imagen, y para ampliar un poquito el ejemplo, removerlo al volver a hacer click en esta..

Espero que sea lo que andabas buscando, saludos!

2
  • Gracias por responder nuevamente, te comento tengo 16 imágenes que los usare como botones para ser seleccionados, como ves en JS logro almacenar el icono seleccionado en una variable y lo muestro en un alert, pero al dejar de pasar el mousse pierde el efecto hover. Necesito que funciones como una input radio, que solo se seleccione 1 opción y esa opción mantenga su efecto hover, estare atento gracias.
    – APRECode
    Commented el 6 jun. 2018 a las 20:23
  • Volví a formular la pregunta, espero este entendible, por favor nuevamente necesito su ayuda, gracias.
    – APRECode
    Commented el 20 jun. 2018 a las 3:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.