我希望在悬停在
上时让此标签动画显示在:
悬停时:
我如何使用jquery进行此操作?
<div class="recruiterLink">
<a href="http://mydomain.com/recruiter/">
<span>Recruiting?</span>
<br>
Advertise a vacancy »
</a>
</div>
谢谢!
答案 0 :(得分:5)
这可能是您正在寻找的东西的开端:
$(document).ready(function() {
$('#tab-to-animate').hover(function() {
// this anonymous function is invoked when
// the mouseover event of the tab is fired
// you will need to adjust the second px value to
// fit the dimensions of your image
$(this).css('backgroundPosition', 'center 0px');
}, function() {
// this anonymous function is invoked when
// the mouseout event of the tab is fired
// you will need to adjust the second px value to
// fit the dimensions of your image
$(this).css('backgroundPosition', 'center -20px');
});
});
抱歉误读了这段代码应该做的问题,假设您最初使用position:relative css属性将其推下来。
$(document).ready(function() {
$('.recruiterLink').hover(function() {
$(this).css({
'position' : 'relative',
'top' : 0
});
}, function() {
$(this).css({
'position' : 'relative',
'top' : 20
});
});
});
答案 1 :(得分:3)
我会这样:
$(".recruiterLink").hover(function(){
$(this).stop().animate({"top" : "-20px"});
}, function(){
$(this).stop().animate({"top": "0"});
});
这意味着你的div.recruiterLink应该有一个定位
.recruiterLink
{
position: relative;
}
答案 2 :(得分:1)
HTML
<div class="recruiterLink">
<a href="http://mydomain.com/recruiter/">
<span>Recruiting?</span>
<div class="hover-item" style="display:none;">Advertise a vacancy »</div>
</a>
</div>
jQuery的:
$(".recruiterLink").hover(function() {
$(this).find(".hover-item").toggle();
},
function() {
$(this).find(".hover-item").toggle();
});
如果需要,您还可以添加一些动画效果。