标签: jquery-hover
当鼠标离开视口时如何使JQuery .hover()工作？
下面的代码将div放在视图端口的最顶部.
预期的行为是:
当用户将鼠标悬停在div上时,然后向上移动鼠标直到光标离开视口,应在控制台中记录"悬停"消息.问题是没有任何内容记录到控制台.
当鼠标离开视口时,如何让JQuery .hover()将某些内容记录到控制台？
<body style="margin: 0; padding: 0;">
<div class="foo" style="background-color: blue; width: 100px; height: 100px;">
Test
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(".foo").hover(function(){
console.log("hover in");
}, function(){
console.log("hover out");
});
</script>
推荐指数
解决办法
查看次数
这是什么简写？
这里有一些凌乱的javascript:
$('.menu').mouseover(function () {
$(this).animate({
}, 500, function() {});
}).mouseout(function () {
$(this).animate({
}, 500, function() {});
});
我怎样才能让这个更小,而不是缩小,但是没有办法说"toggle"而不是"mouseover"那么"mouseout"？
谢谢
推荐指数
解决办法
查看次数
将鼠标悬停在链接上所需的WordPress黑客/插件,在DIV(图库)中显示图像
我正在为艺术画廊开发一个WordPress网站.客户希望艺术家名单图像库完全像这样:http://www.walkercontemporary.com/artists/
我创建了一个自定义帖子类型,用于生成列表,指向艺术家特定内容的链接.现在我需要一个效果,在鼠标悬停链接时在相邻的DIV中显示样本图像.基于查看上述站点的源代码,我确信这是一个Dreamweaver功能.我想将我的解决方案集成到WordPress易于使用的CMS功能中.否则我会建议客户寻求其他解决方案.他们没有足够的东西来维持大量的艺术家手工编码,他们不希望游客的缩略图悬停(这是多少其他解决方案接近它).
理想情况下,我希望在列表项中生成某种REL值或自动生成的onmouseover值,这些列表项调用与自定义帖子类型中的每个艺术家相关联的特色图像.这可能吗？-thx - 史蒂夫
推荐指数
解决办法
查看次数
如何在两个单独的对象上创建悬停效果？
我有两个div,A和B.我想将鼠标悬停在DIV A上并显示DIV B,但我不希望DIV B隐藏直到鼠标从DIV B移开.
<div id="a"><img src="images...." class="profile" id="options" /></div>
<div id="b"> //some information</div>
jquery:
<script>
$(document).ready(function(){
$('#a').hover(function(){
$('#b').show();
},
function(){
$('#b').hide();
});
});
我的CSS:
<style type="text/css">
<!--
.profile{ position: absolute; top: 0px; width: 20px; height: 20px;}
#id{ position: absolute; top: 20px; width: 300px; height: 400px;}
-->
</style>
我提供了css用于解释目的.我想改变班级,但是DIV A和DIV B有同一个班级.这是不可能的,因为我的DIV B将变成聊天图像的大小.
下面是我想要描述的图像:
谁可以请解释我的代码出错的地方？
推荐指数
解决办法
查看次数
通过悬停另一个元素使元素可见(不带:hover-property)
好的,这是问题所在:
我有这三个DIV:
<div id="gestaltung_cd"></div>
<div id="gestaltung_illu"></div>
<div id="gestaltung_klassisch"></div>
......以及这三个DIV - 它们是不可见的(显示:无;) - 在页面上完全不同的位置:
<div id="mainhexa1"></div>
<div id="mainhexa2"></div>
<div id="mainhexa3"></div>
我想要做的是:如果我徘徊"gestaltung_cd"我想让"mainhexa1"可见,如果我徘徊"gestaltung_illu"我想制作"mainhexa2"visbile等等......
正如你所看到的,三个不可见的DIV不是前三个中的子元素......所以":hover"在这种情况下是不可能的.有没有一种简单的方法在JQuery中执行此操作？
谢谢,Jochen
推荐指数
解决办法
查看次数
2 Div's One隐藏并出现在第2位
我有2个div彼此相邻,我们称之为div A和div B.
我希望Div B隐藏,当你将鼠标悬停在div a上时,div b出现,然后当你不再悬停盘旋时它会消失....不知道要放什么.
推荐指数
解决办法
查看次数
jQuery - 粗略淡入淡出过渡
我有一个div有一些内容,然后在悬停我试图FadeIn另一个跨越它同时fadding出容器div.悬停后容器div的问题转到opacity 0然后返回到我设置的值.感觉就像眨眼一样.我需要顺利.
这是我的代码:
Live JSFiddle:http://jsfiddle.net/alok108/Y7hgs/28/
HTML
<div class="campaign-box">
<a href="#"class="like-box">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span>34234983-80</span>
</div>
<span> </span>
</a>
</div>
jQuery的
$(function () {
$(".campaign-box span:last").hide();
$(".campaign-box").hover(function () {
$(".box").css("opacity", 0.5);
$(".campaign-box span:last").fadeIn("fast");
}, function () {
$(".box").css("opacity", 1);
$(".campaign-box span:last").fadeOut("slow");
});
});
CSS
.campaign-box {
display: block;
height: 100px;
width: 200px;
border: solid black;
}
.box {
display:block;
height:100%; …推荐指数
解决办法
查看次数
如何获取ul标签中特定li的位置？
我希望得到一个li我悬停的数字jQuery.这是我的代码:
<ul>
<li></li>
<li></li>
<li></li> /* I want hover on this element */
<li></li>
<li></li>
</ul>
我希望当悬停在顶部代码中的某些元素时获得所有的数字lies....例如在顶部代码中我想得到3(这意味着这第三个元素)
推荐指数
解决办法
查看次数
我可以在jquery悬停上更改图像吗？
我有这个大图像显示,在底部我有小图像,我希望大图像到我正在盘旋的图像,如果可能的话.谢谢.
这是我的代码.
<div class="wrapper">
<div class="inner">
<img src="img/1.png" alt="image 1">
</div>
<ul class="small">
<li> <img src="img/1.png" alt="image 2"> </li>
<li> <img src="img/2.png" alt="image 2"> </li>
<li> <img src="img/3.png" alt="image 2"> </li>
<li> <img src="img/4.png" alt="image 2"> </li>
<li> <img src="img/5.png" alt="image 2"> </li>
</ul>
</div>
这是我的jquery但不起作用.
<script type="text/javascript">
$(document).ready(function() {
$('.small').hover(function() {
$('.inner img').attr('src' = '.small img src')
});
});
</script>
推荐指数
解决办法
查看次数
jQuery悬停克隆项目
我有一些像这样的HTML结构:
<div id="mobileWrapper" class="ios">
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
<div class="previewLeft">
<span class="previewLeftInner"> 10% </span>
</div>
<div class="previewRight">
<span class="previewUser"> Some Text here </span>
</div>
</div>
<!-- clone will placed here -->
</div>
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
...
</div>
<!-- clone will placed here -->
</div>
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
...
</div>
<!-- clone will placed here -->
</div>
</div>
现在当.hoverWrapper我徘徊物品时,我想要克隆悬停的物品并将其放置在悬停物品上方.好的,到目前为止这是有效的.这里的问题是悬停时的闪烁效果.一些帮助将是优雅的!
http://jsbin.com/oJeDUmU/2/edit
我试过这个,但不是我想要的:
if ($(this).parent().find('.hoverWrapper')) {
if ($(this).find('.previewActive')) {
return false;
}
}
推荐指数
解决办法
查看次数
标签 统计
jquery-hover ×10
jquery ×8
css ×5
html ×4
hover ×3
javascript ×3
css3 ×1
fadein ×1
gallery ×1
onhover ×1
slideshow ×1
toggle ×1
transition ×1
viewport ×1
wordpress ×1