我在 <ul>
中有一些导航元素在我网站的侧边栏上。这是相关的标记和 CSS 样式:
<ul>
<li><a href="">Blog</a></li>
<li><a href="">Work</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
#sidebar ul {
list-style-type: none;
float: right;
position: relative;
right: -10px;
}
#sidebar ul li a {
display: inline-block;
line-height: 30px;
text-decoration: none;
padding: 0px 10px;
color: #555555;
}
#sidebar ul li a:hover {
background: url('images/nav-hover.png') no-repeat;
color: #f0f0f0;
}
当用户将鼠标悬停在导航元素(<a>
标签)上时,我想要背景 nav-hover.png
使用 CSS 过渡从右侧滑入。我试过了,但它似乎不起作用:
#sidebar ul li a {
background: none;
transition-property: background;
transition-duration: 1s;
display: inline-block;
line-height: 30px;
text-decoration: none;
padding: 0px 10px;
color: #555555;
}
#sidebar ul li a:hover {
background: url('images/nav-hover.png') no-repeat;
color: #f0f0f0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
我怎样才能做到这一点?
JSFiddle 链接:http://jsfiddle.net/2EfYa/
最佳答案
您需要为background-position
做一个转换:
http://jsfiddle.net/vQgEd/ - 可能只适用于 webkit
ul li a {
background: url('http://lorempixel.com/400/200') -100% 0px no-repeat;
transition: background-position 1s;
-webkit-transition: background-position 1s;
display: inline-block;
line-height: 30px;
text-decoration: none;
padding: 0px 10px;
color: #555555;
}
ul li a:hover {
background-position:left top;
color: #f0f0f0;
}
关于html - 在混合宽度的导航元素上从右侧滑入背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14127848/