0

嗨，我正在制作一种效果，即当鼠标在 div 中输入一个按钮时，该 div 中显示一个按钮，而当用户鼠标再次离开该区域时，按钮隐藏。它有效，但问题是我已经多次使用 div，所以我使用类来定义 div。因此，当鼠标进入一个 div 时，其他 div 也会受到影响。

代码 ：

jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#container").mouseenter(function(){
    $(":button").show();
  });
  $("#container").mouseleave(function(){
    $(":button").hide();
  });
});
</script>

jsp代码：

   <div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center"><a href="product?pid=3" style="color: #9caeb9;text-decoration: none;">Nokia Lumia 925</a></div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>

<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center"><a href="product?pid=5" style="color: #9caeb9;text-decoration: none;">HCL Me</a></div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>

我尝试将 Jquery 放在上面，class="mainitemlist"但它不起作用。所以我在id="container". 任何人都有想法，为什么它不起作用？？？

4

3 回答 3

2

你可以这样做：

$(document).ready(function () {
    $(".mainitemlist").mouseenter(function () {
        $(this).find(":button").show();
    }).mouseleave(function () {
        $(this).find(":button").hide();
    });
});

演示：小提琴

当您使用该类时，mainitemlist您没有正确使用函数范围$(this)，因此它显示了所有按钮mouseenter，因为您使用了代码：

$(":button").show();

更新

$(document).ready(function () {
    $(document).on('mouseenter', '.mainitemlist', function () {
        $(this).find(":button").show();
    }).on('mouseleave', '.mainitemlist', function () {
        $(this).find(":button").hide();
    });
});
于 2013-10-23T10:30:05.980 回答
1

尝试：

$(document).ready(function(){
  $("#container").mouseenter(function(){
    $("#container button").show();
  });
  $("#container").mouseleave(function(){
    $("#container button").hide();
  });
});

看看这个小提琴。

顺便说一句，你有 2 个 id 为container. 这可能是一个错误，如果不是，这是不好的做法。

希望有帮助。

于 2013-10-23T10:28:33.657 回答
0 
$("#container").mouseenter(function(){
    $(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
    $(this).find('#yourbutton').hide();
});
于 2013-10-23T10:28:16.177 回答