Home / Questions / 171086
Accepted
APRECode
Asked: 2020-06-07 08:54:30 +0800 CST 2020-06-07 08:54:30 +0800 CST

Keep hover effect when selected

  • 772

I have a problem to maintain the effect hover, I am looking for the image to maintain the hover effect when I click, and if I select the other image, the effect of the first image is removed, and the second image maintains its hover effect. Let it work as a radio type input, in this case an image will remain selected.

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

1 Answers

  1. Best Answer

    If I didn't misunderstand your problem, you could do the following;

    $('.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>

    The style when the image is in :hoveryou define it again in another class too, in the example it would beclasehover

    In this way, it would be enough to detect the event clickwith JavaScript and add said class when clicking on the image, and to expand the example a little, remove it when clicking on it again.

    I hope it is what you were looking for, greetings!

    • 1