[英]Fade from background-image to hover
我想將我的第一個背景圖像淡化為應該用於懸停的圖像,然后在用戶移開鼠標后再次將其關閉。 可以使用jQuery。
這是我到目前為止的內容:
<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>
哎呀,格式化不正確...
我在jsbin中放了一個好的開始 。 我只是將新聞圖標作為演示進行了布線。 它不是防彈的,因為在過渡完成之前離開元素會使元素處於錯誤狀態,但是我不知道該如何立即解決。 對於這項工作,jquery可能具有比fadeOut/fadeIn
更好的方法。 另外,您還需要:active
背景! important
! important
以便在單擊時始終可以看到圖像,在保存之前我忘記這樣做了。
同樣,您也不能在<li>
元素之外懸掛<a>
元素。 使鏈接display:block
使它們占據列表項內的空白,然后您就可以將hacky onclick="window.location..."
當作垃圾。
@獵人
這無視褪色的欲望。
$('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);
}
});
});
這或多或少給了大局。 未經測試或證明。 如果您試一下並將其放到jfiddle上,我會幫助您解決的。 您還需要制作一個.mouseleave()
函數
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.