Question

我正在处理悬停动画，这是我的代码

＆＃13;

new

＆＃13;

.blocks {
    position: relative;
}

.block {
    position: absolute;
    width: 200px;
    height: 200px;
    display: block;
}

.blocks .item-1 {
    background-color: red;
}
.blocks .item-2 {
    background-color: blue;
}
.blocks .item-3 {
    background-color: yellow;
}
.blocks .item-4 {
    background-color: black;
}

＆＃13;

我想要的是，例如，当您使用鼠标<div class="menu"> <ul> <li class="item-1">Hello</li> <li class="item-2">Hi</li> <li class="item-3">How are</li> <li class="item-4">You today</li> </ul> </div> <div class="blocks"> <div class="block item-1"></div> <div class="block item-2"></div> <div class="block item-3"></div> <div class="block item-4"></div> </div>进行徘徊时，显示同一类的<li class="item-2">Hi</li>并隐藏其他类别。

感谢您的帮助！

Answer 1

一小段jQuery脚本用于注册悬停事件，隐藏所有其他块并显示当前悬停的类元素就是所需要的。

＆＃13;

$(document).ready(function() {
  $('.menu li').hover(function() {
    $('.blocks .block').hide();
    $('.blocks .' + $(this).attr('class')).fadeIn();
  });
});

＆＃13;

.blocks {
  position: relative;
}
.block {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
}
.blocks .item-1 {
  background-color: red;
}
.blocks .item-2 {
  background-color: blue;
}
.blocks .item-3 {
  background-color: yellow;
}
.blocks .item-4 {
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="item-1">Hello</li>
    <li class="item-2">Hi</li>
    <li class="item-3">How are</li>
    <li class="item-4">You today</li>
  </ul>
</div>

<div class="blocks">
  <div class="block item-1"></div>
  <div class="block item-2"></div>
  <div class="block item-3"></div>
  <div class="block item-4"></div>
</div>

＆＃13;

Answer 2

这是一个jQuery示例：

$('.menu li').mouseenter(function(){
    $('.blocks .block').hide();
    $('.blocks .block.' + $(this).attr('class')).show();
}).mouseleave(function(){
    $('.blocks .block').hide();
});

DEMO

Answer 3

试试这个jQuery代码：

$(".menu li").mouseenter(function(){
    $('.blocks .block').hide();
    $(".blocks").find("."+$(this).attr('class')).show();
}).mouseleave(function(){
     $('.blocks .block').hide();
});

希望有所帮助......

Foreach项目悬停不同的背景

3 个答案: