李背景悬停改变背景

我想两个在我的<li>上创建翻转效果，背景为<li>完全改变。无活动状态的背景非常适合，但在翻转时背景已关闭。下面是我的代码。李背景悬停改变背景

HTML：

<div class="sidebox"> 
<ul> 
<li><a href="http://2020mediaonline.com/wptest/wp-login.php">Log in</a></li> 
<li><a href="http://2020mediaonline.com/wptest/?feed=rss2">Entries</a></li> 
<li><a href="http://2020mediaonline.com/wptest/?feed=comments-rss2" >Comments</a></li> 
<li><a href="http://wordpress.org/">WordPress.org</a></li> 
</ul> 
</div>

这里是我的CSS：

div.sidebox ul {list-style-type:none;font:12px arial;} 
div.sidebox ul li{background: url(images/right_ul_bg.jpg) no-repeat left;padding:10px 0 0 50px;} 
div.sidebox ul li a{text-decoration:none;color:white;display:block;height:31px; width:247px;} 
div.sidebox ul li a:hover{ background:#2f373c url(images/right_ul_bg_hover.jpg) -10px -50px;}

这里是一个活生生的例子http://jsfiddle.net/cd7rR/

来源

2012-10-31 Denoteone

有你的萤火，图像加载检查或不 –

两个图像加载一个在另一个悬停在页面加载时，但悬停图像偏移了很多。 – Denoteone

你把悬停背景图像上锚。原始背景图片位于列表项目上。 定位点已被抵消，因为您在列表项上声明了填充。以下是列表项目上悬停背景的演示。

div.sidebox ul li:hover{ background:url(http://2020mediaonline.com/wptest/wp-content/themes/Price_LawTheme/images//right_ul_bg_hover.jpg) no-repeat;}div.sidebox ul

http://jsfiddle.net/cd7rR/1/

来源

2012-10-31 03:49:04 henryaaron

太好了。感谢您的帮助，感谢您帮助我理解我的问题。 +1并检查。 – Denoteone

李背景悬停改变背景

回答

相关问题