Maintain hover effect when selected

Question

Maintain hover effect when selected

Navigation

#1 by (1 votes)

1

I have a problem to keep the effect hover , I look for when clicking that the image maintains the hover effect, and if I select the other image the effect of the first image is removed, and the second image maintains its hover effect . That works 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 jquery html css

asked by APRECode 06.06.2018 в 18:54

source

1 answer

Php show label img in echo Is it possible to use SCOPE_IDENTITY in an update? Alternatives?

score 1 · Answer 1

If I did not misinterpret 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 :hover you define it again in another class also, in the example it would be clasehover

In this way, it would be enough to detect the event click with JavaScript and add that class when clicking on the image, and to enlarge the example a bit, remove it when you click on it again.

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