jquery mouseover和mouseout需要为特定元素工作 [英] jquery mouseover and mouseout needs to work for specific element

问题描述

<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_title，当我悬停在hot_post_thumbnail。如果我尝试用此代码显示此信息

This is my code. By default, "hot_post_title" is hidden. But I want to display "hot_post_title" when I hover over on "hot_post_thumbnail". If I try to display this by this code

$(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 。我喜欢在< li>< / li> 下只显示一个自己的hot_post_title。例如，如果我将鼠标放在第一个< li> .hot_post_thumbnail上，我想首先显示hot_post_title / code>。然后第二个。第三是第三。不是所有的一次。

Showing all of the "hot_post_title" within ul. I like to show only one own "hot_post_title" within <li></li>. For example if I mouse over the first <li> ".hot_post_thumbnail" I like to show first "hot_post_title" within first <li>. Then second for second. Third for third. Not all at a time. Please help me to do it (using jQuery).

推荐答案

使用$（this）而不是全局类，这显然会影响所有项目与该类。

Use $(this) instead of global class, which will obviously affect all items with that class. By using THIS you are targeting specific item that was hovered.

  $(".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");
  });

复制粘贴应该可以做到。

Copy pasting this should do the trick.

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

To set delay effect use show() instead.

  $(".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。

Use css when you want to set css settings instantly.

这篇关于jquery mouseover和mouseout需要为特定元素工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！