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屋!