jquery 'hover mouseover' 函数跳动
jquery 'hover mouseover' function jumpy
这是我的 html 和 jquery 代码,当将鼠标悬停在 img1 上时,content_hidden_popout 会出现,但仍在 img1 上并且四处移动它真的非常跳跃,喜欢它一直向下直到鼠标悬停在 img1 上。
$(document).ready(function(){
$(".img1").on('hover mouseover', function() {
//alert('test');
$(".content_hidden1").show();
$(".content_hidden2, .content_hidden3, .content_hidden4, .content_hidden5, .content_hidden6, .content_hidden7, .content_hidden8, .content_hidden9, .content_hidden10").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
<img class="img1" src="<?php echourl(); ?>/images/slider/1.png" />
<div class="content_hidden1 content_hidden_popout">
<h3>Schools</h3>
<p>text, text, text</p>
<a href="<?php echo get_permalink( 63 ); ?>">
<img class="learn-more" src="<?php echourl(); ?>/images/learn-more.png">
</a>
</div>
</li>
你最好使用这种形式的代码:
$("selector").hover(
function()
{
$(this).show();
},
function()
{
$(this).hide();
});
这是 hover()
函数的一个特殊 属性,它允许使用两个 function()
(s),用逗号分隔。因为 mouseenter()
和 mouseleave()
一起使用很常见,重复写会使代码变大。
最好不要以您使用的方式使用 show()
和 hide()
。
jQuery 的 .hover()
有两个事件处理程序的选项。一份用于 mouseover
一份用于 mouseout
.
但跳动的真正原因是当您将鼠标悬停在图像上时,弹出窗口将显示在图像前面。这意味着您不再将鼠标悬停在图像上,因此图像被隐藏,这会导致您再次将鼠标悬停在图像上,等等...
要解决此问题,请将事件处理程序应用于父元素。
$(document).ready(function(){
$(".img1").parent().hover(
function() {
$(".content_hidden_popout").hide();
$(".content_hidden_popout", this).show();
},
function() {
$(".content_hidden_popout").hide();
}
);
});
这是我的 html 和 jquery 代码,当将鼠标悬停在 img1 上时,content_hidden_popout 会出现,但仍在 img1 上并且四处移动它真的非常跳跃,喜欢它一直向下直到鼠标悬停在 img1 上。
$(document).ready(function(){
$(".img1").on('hover mouseover', function() {
//alert('test');
$(".content_hidden1").show();
$(".content_hidden2, .content_hidden3, .content_hidden4, .content_hidden5, .content_hidden6, .content_hidden7, .content_hidden8, .content_hidden9, .content_hidden10").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
<img class="img1" src="<?php echourl(); ?>/images/slider/1.png" />
<div class="content_hidden1 content_hidden_popout">
<h3>Schools</h3>
<p>text, text, text</p>
<a href="<?php echo get_permalink( 63 ); ?>">
<img class="learn-more" src="<?php echourl(); ?>/images/learn-more.png">
</a>
</div>
</li>
你最好使用这种形式的代码:
$("selector").hover(
function()
{
$(this).show();
},
function()
{
$(this).hide();
});
这是 hover()
函数的一个特殊 属性,它允许使用两个 function()
(s),用逗号分隔。因为 mouseenter()
和 mouseleave()
一起使用很常见,重复写会使代码变大。
最好不要以您使用的方式使用 show()
和 hide()
。
jQuery 的 .hover()
有两个事件处理程序的选项。一份用于 mouseover
一份用于 mouseout
.
但跳动的真正原因是当您将鼠标悬停在图像上时,弹出窗口将显示在图像前面。这意味着您不再将鼠标悬停在图像上,因此图像被隐藏,这会导致您再次将鼠标悬停在图像上,等等...
要解决此问题,请将事件处理程序应用于父元素。
$(document).ready(function(){
$(".img1").parent().hover(
function() {
$(".content_hidden_popout").hide();
$(".content_hidden_popout", this).show();
},
function() {
$(".content_hidden_popout").hide();
}
);
});