[英]How can I make a span stay when I hover over an image with jquery?
I have this code that works when I hover over the image but when I hover over the span it goes back to opacity 0. Also the span does not appear in the first image? 当我将鼠标悬停在图像上时,我有这段代码可以工作,但是当我将鼠标悬停在跨度上时,它又回到了不透明度0。
$(document).ready(function() {
var $img = $('.carousel-inner li img'),
$text = $('.carousel-inner li span');
$img.hover(function() {
$text.stop().animate({
opacity: 1,
height: '75px'
}, 500);
},function() {
$text.stop().animate({
opacity: 0,
height: '0px'
}, 500);
});
});
I believe you should use the $.hover()
function on the <li>
(the container), not only the <img>
. 我相信您应该在
<li>
(容器)上使用$.hover()
函数,而不仅仅是<img>
。
var $li = $('.carousel-inner li')
...
$li.hover(function() { ... }
You can see the effect here: http://jsbin.com/EGOsuYi/1/ 您可以在这里看到效果: http : //jsbin.com/EGOsuYi/1/
I got it to work. 我知道了。 Instead of
代替
var $img = $('.carousel-inner li img'),
I put 我放
var $img = $('.carousel-inner li')
I removed the img
from the var so when I hover over the whole li
my function worked instead of just hovering over the img
. 我从var中删除了
img
,所以当我将鼠标悬停在整个li
我的功能就起作用了,而不仅仅是将鼠标悬停在img
。
But I still can't get the span
to appear in the first image? 但是我仍然无法使
span
出现在第一张图像中吗?
You should address the wrapper of both like this: 您应该这样处理两者的包装:
$('.carousel-inner li').on('mouseenter',function() {
//show text
});
$('.carousel-inner li').on('mouseleave',function() {
//hide text
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.