Question

你好我有一个php页面，显示10篇文章，阅读更多按钮隐藏所有我需要的是当我悬停在文章框上阅读更多显示一切正常工作，当我悬停在任何它显示阅读更多关于第一篇文章只是不是每篇文章

这是我的php代码

$query = mysql_query("SELECT * FROM stories ORDER BY id DESC LIMIT 0,10");
while ($row=mysql_fetch_array($query))
{
    echo "<div class='content_story_block'>
            <div class='content_story_block_menu'>$row[title]
                <div id='Read_More' style='display:none;' class='content_story_block_menu_span'>Read More</div>
            </div>
            <div class='content_story_block_row'>$row[brief]</div>
         </div>";
}

这是我的jquery代码

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $('#Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

我错过了什么？

Answer 1

将Read_More从id更改为class：

<div style='display:none;' class='content_story_block_menu_span Read_More'>
Read More</div>

然后更改你的脚本：

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $(this).find('div.Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

Answer 2

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $(this).next('#Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

Answer 3

试试这个

<script type="text/javascript">
$('.content_story_block').hover(function() {

 $('.content_story_block_menu_span').each(function(){
      $(this).toggle('slow', function() {
    // Animation complete.
  });
  })
});

jquery只改变一个元素

3 个答案: