Question

我希望在按钮悬停时使用jQuery淡入div。到目前为止我的代码没有问题。但是，我不希望它打开每个＆＃34; div1＆＃34;在页面上，只是一个特定的按钮悬停在上面。它适用于Tumblr，所以我不能使用id而不是class，因为它会为每个条目生成按钮和div。

我觉得有一个简单的解决方案，但我是jQuery的新手。谢谢你的任何建议。

<html>
<head>

<script src="
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<script>
$(document).ready(function(){
$(".button1").hover(function()
{ $(".div1").fadeIn('slow'); 
});
});
</script>

<style type="text/css">
.div1 {width:80px;height:80px;display:none;
background-color:#000000;color:#ffffff;}

.button1 {border:0px;background-color:#d3d3d3;}
</style>

</head>

<body>

<p>Sample text.</p>

<button class="button1">Hover here</button>
<br>

<div class="div1">1</div>
<br>

<button class="button1">Hover here</button>
<br>

<div class="div1">2</div>

</body>
</html>

Answer 1

问题在于选择器$(".div1")，它会选择所有div1元素，而不是想要在悬停元素的下一个兄弟旁边选择

＆＃13;

$(document).ready(function() {
  $(".button1").hover(function() {
    $(this).next().next(".div1").fadeIn('slow');
  });
});

＆＃13;

.div1 {
  width: 80px;
  height: 80px;
  display: none;
  background-color: #000000;
  color: #ffffff;
}
.button1 {
  border: 0px;
  background-color: #d3d3d3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>

<p>Sample text.</p>

<button class="button1">Hover here</button>
<br/>
<div class="div1">1</div>
<br>

<button class="button1">Hover here</button>
<br/>

<div class="div1">2</div>

＆＃13;

JQuery FadeIn Specific Div

1 个答案: