[英]Fade from background-image to hover
I'd like to fade my first background-image into one that is supposed to be used on hover and then off again once the user removes their mouse. 我想将我的第一个背景图像淡化为应该用于悬停的图像,然后在用户移开鼠标后再次将其关闭。 Can use jQuery.
可以使用jQuery。
Here is what I have so far: 这是我到目前为止的内容:
<ul style="top: -70px; display: block; padding-left: 205px;" id="cats-menu" class="nav superfish sf-js-enabled">
<a href="http://www.ballpointtech.com/category/guides/"></a><li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"><a href="http://www.ballpointtech.com/category/guides/"> </a></li>
<a href="http://www.ballpointtech.com/category/news/"></a><li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"><a href="http://www.ballpointtech.com/category/news/"> </a></li>
<a href="http://www.ballpointtech.com/category/reviews/"></a><li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"><a href="http://www.ballpointtech.com/category/reviews/"> </a></li>
<a href="http://www.ballpointtech.com/category/tipstricks/"></a><li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"><a href="http://www.ballpointtech.com/category/tipstricks/"> </a></li>
</ul>
<style type="text/css">
#li_guides {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Still1.png');
width:130px;
height:92px;
}
#li_guides:hover {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Rollover1.png');
}
#li_guides:active {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Click2.png');
}
#li_reviews {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Still.png');
width:130px;
height:92px;
}
#li_reviews:hover {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Rollover.png');
}
#li_reviews:active {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Click.png');
}
#li_news {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Still.png');
width:130px;
height:92px;
}
#li_news:hover {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Rollover.png');
}
#li_news:active {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Click.png');
}
#li_tipstricks {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-still.png');
width:130px;
height:92px;
}
#li_tipstricks:hover {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-rollover.png');
}
#li_tipstricks:active {
background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-click.png');
}
</style>
Argh, can't get the formatting right... 哎呀,格式化不正确...
Here's a good start I put together in jsbin . 我在jsbin中放了一个好的开始 。 I wired up just the news icon as a demo.
我只是将新闻图标作为演示进行了布线。 It's not bulletproof as leaving the element before the transition completes will leave the element in the wrong state but I don't know how to address that offhand.
它不是防弹的,因为在过渡完成之前离开元素会使元素处于错误状态,但是我不知道该如何立即解决。 jquery might have better methods than
fadeOut/fadeIn
for this job. 对于这项工作,jquery可能具有比
fadeOut/fadeIn
更好的方法。 Also you'll want to make the :active
background ! important
另外,您还需要
:active
背景! important
! important
so that image is always visible when clicking, which I forgot to do before saving. ! important
以便在单击时始终可以看到图像,在保存之前我忘记这样做了。
also you can't have <a>
elements hanging around outside of the <li>
elements. 同样,您也不能在
<li>
元素之外悬挂<a>
元素。 make links display:block
so they take up the empty space inside the list item and then you can junk the hacky onclick="window.location..."
. 使链接
display:block
使它们占据列表项内的空白,然后您就可以将hacky onclick="window.location..."
当作垃圾。
@hunter @猎人
this is ignoring the desire to fade. 这无视褪色的欲望。
$('your.item').mouseenter(function(){
$('your.item').stop().animate({opacity: 0},200,function(){
$('your.item').attr('src','/new/image.jpg');
$('your.item').stop().animate({opacity: 1},200);
}
});
});
this more or less gives the big picture. 这或多或少给了大局。 not tested or proofed.
未经测试或证明。 if you give this a shot and put it on jfiddle i will help you through it.
如果您试一下并将其放到jfiddle上,我会帮助您解决的。 you also need to make a
.mouseleave()
function 您还需要制作一个
.mouseleave()
函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.