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

选择时保持悬停效果

  • 772

我有一个保持效果的问题hover，我正在寻找点击时保持悬停效果的图像，如果我选择其他图像，则第一张图像的效果被移除，第二张图像保持悬停效果。让它作为无线电类型输入工作，在这种情况下，图像将保持选中状态。

<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

    如果我没有误解您的问题，您可以执行以下操作；

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

    图像中的样式:hover您也可以在另一个类中再次定义它，在示例中它将是clasehover

    这样，click在单击图像时，用 JavaScript 检测事件并添加该类就足够了，并且稍微扩展示例，再次单击时将其删除。

    我希望它是你要找的，问候！

    • 1