Fatal编程技术网
  • html/
  • Html li背景悬停更改背景

Html li背景悬停更改背景

html css

Html li背景悬停更改背景,html,css,html-lists,background-image,Html,Css,Html Lists,Background Image,我正在尝试在背景完全改变的情况下，在我的上创建翻滚效果。“无活动”状态下的背景显示为关闭状态，但滚动时背景显示为关闭状态。下面是我的代码 HTML: <div class="sidebox"> <ul> <li><a href="http://2020mediaonline.com/wptest/wp-login.php">Log in</a></li> <li><a href="http://2020me

我正在尝试在
  • 背景完全改变的情况下，在我的
  • 上创建翻滚效果。“无活动”状态下的背景显示为关闭状态，但滚动时背景显示为关闭状态。下面是我的代码
    
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>  

    

    下面是一个将悬停背景图像放置在锚上的实时示例。原始背景图像位于列表项上。锚点是偏移的，因为您在列表项上声明了填充。下面是列表项上带有悬停背景的演示
    

    您是否在firebug中检查了图像是否正在加载，当页面加载时，两个图像加载一个悬停在另一个上，但悬停图像偏移了很多。太好了。谢谢你的帮助，谢谢你帮助我理解我的问题+1和检查。

    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;}

    

    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