Question

我正在尝试创建一行内部隐藏图像的div，当mdsed over middot将淡出，图像将淡入，然后当鼠标离开该div时淡出。我知道我需要在jquery中使用.hover函数做一些事情。

例如

<div id='1_1'>
 &midddot;
 <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2'>
 &midddot;
 <img src='image1_2.jpg' style='display:none'>
</div>
<div id='1_3>
 &midddot;
 <img src='image1_3.jpg' style='display:none'>
</div>

每个div代表一篇文章的页面。因此，当id ='1_3'时，那将是第1行，第3页，或者id ='1_1'将是第1行第1页。

只是不确定如何构建jquery来完成这项工作。

仅供参考，我使用php / mysql输出信息。所以上面的代码将是“while”语句中的一个循环。后续循环将增加行号（id =“2_1”，“2_2”等）。

感谢您的任何建议。

Answer 1

在div中添加一个类，以便在jQuery中更容易选择。

<div id='1_1' class='fade'>
   &midddot;
   <img src='image1_1.jpg' style='display:none'>
</div>
<div id='1_2' class='fade'>
   &midddot;
   <img src='image1_2.jpg' style='display:none'>
</div>
...

然后使用悬停功能：

 <script type="text/javascript">
    $(document).ready(function() {
       $("li.fade").hover(function(){  
           $("img", this).fadeIn();
           $("img", this).fadeOut();
       });
    });
  </script>

Answer 2

使用mouseenter()和mouseleave()以及fadeOut()和fadeIn()来获得this

等效果

通过在查询中传递两个id来淡入div

2 个答案: