gpt4 book ai didi

html - li 背景 hover 改变背景

转载 作者:太空宇宙 更新时间:2023-11-04 04:52:34 33 4
gpt4 key购买 nike

我正在尝试两个在我的 <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/

最佳答案

您将悬停背景图像放在 anchor 上。原始背景图像在 list-item 上。 anchor 是偏移的,因为您在 list-item 上声明了填充。这是一个在 list-item 上使用悬停背景的演示。

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/

关于html - li 背景 hover 改变背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13150707/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com