Question

<div class="hot_post">
<header>
    <ul>
        <li><img src="<?php echo get_template_directory_uri(); ?>/images/hot_post.png" alt="hot post"></li>
        <li><h1>Hot Post</h1></li>
    </ul> 
</header>
<div class="hot_post_list">
    <ul>
        <li>
            <div class="hot_post_single">
                <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
                <img src="http://lorempixel.com/40/40" alt="autor_avatar" class="hot_post_avatar">
            </div>
            <div class="hot_post_title">This is post for wordrpess</div>
        </li>
        <li>
            <div class="hot_post_single">
                <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
                <img src="http://lorempixel.com/40/40" alt="autor_avatar">
            </div>
            <div class="hot_post_title">This is post for wordrpess</div>
        </li>
        <li>
            <div class="hot_post_single">
                <a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
                <img src="http://lorempixel.com/40/40" alt="autor_avatar">
            </div>
            <div class="hot_post_title">This is post for wordrpess</div>
        </li>
    </ul>
</div>

这是我的代码。默认情况下，隐藏“hot_post_title”。但是当我将鼠标悬停在“hot_post_thumbnail”上时，我想显示“hot_post_title”。如果我尝试通过此代码显示此内容

$(document).ready(function() {

    $(".hot_post_thumbnail").mouseover(function() {
        $("hot_post_title").css("display","block");
    });

    $(".hot_post_thumbnail").mouseout(function() {
        $("hot_post_title").css("display","none");
    });

});

在ul中显示所有“hot_post_title”。我想在<li></li>中只显示一个自己的“hot_post_title”。例如，如果我将鼠标悬停在第一个<li>“.hot_post_thumbnail”上，我想首先在<li>内显示“hot_post_title”。然后第二秒。第三名是第三名。不是一次一个。请帮我做（使用jQuery）。

Answer 1

使用$（this）而不是全局类，这显然会影响该类的所有项目。通过使用此功能，您可以定位悬停的特定项目。

  $(".hot_post_thumbnail").mouseover(function(){
     $(this).parent().siblings(".hot_post_title").css("display","block");
  });

  $(".hot_post_thumbnail").mouseout(function(){
     $(this).parent().siblings(".hot_post_title").css("display","none");
  });

复制粘贴这应该可以解决问题。

要设置延迟效果，请改用show（）。

  $(".hot_post_thumbnail").mouseover(function(){
     $(this).parent().siblings(".hot_post_title").show("100");
  });

  $(".hot_post_thumbnail").mouseout(function(){
     $(this).parent().siblings(".hot_post_title").hide("100");
  });

如果要立即设置css设置，请使用css。

Answer 2

使用hover进/出处理程序和toggle()方法：

DEMO

$(document).ready(function(){
  $(".hot_post_thumbnail").hover(function(){
     $(this).closest('li').find(".hot_post_title").finish().toggle(400);
  });    
});

为toggle（）效果添加持续时间。

Answer 3

您可以使用方法show()和hide() 试试这个：

 $(".hot_post_thumbnail").mouseover(function(){
         $(this).closest('li').find(".hot_post_title").show();
      });

      $(".hot_post_thumbnail").mouseout(function(){
         $(this).closest('li').find(".hot_post_title").hide();
      });

Answer 4

您需要使用$(this)

 $(".hot_post_thumbnail").mouseover(function(){
     $(this).parent().next(".hot_post_title").show();
  });

  $(".hot_post_thumbnail").mouseout(function(){
     $(this).parent().next(".hot_post_title").hide();
  });

Answer 5

这是因为您每次显示或隐藏它时都会选择每个.hot_post_title。相反，您希望找到适用于已激活.hot_post_title的特定.hot_post_thumbnail。像这样：

$('.hot_post_thumbnail').mouseover(function(){
    $(this).closest('li').find('.hot_post_title').css('display', 'block');
});

从激活缩略图开始，遍历一个公共父（li元素，然后在该.hot_post_title元素中找到li。

Answer 6

JS：

$(".hot_post_thumbnail").hover(function () {
    $(this).closest("li").find(".hot_post_title").show();
}, function () {
    $(this).closest("li").find(".hot_post_title").hide();
});

隐藏标题。

CSS：

.hot_post_title {
    display:none;
}

DEMO here.

Answer 7

使用最接近它会搜索你看起来的所有手柄，并且会很适合你

$('handle').closest('li').find('handle').show();

jquery mouseover和mouseout需要适用于特定元素

7 个答案: