2

我知道背景图像不能超出元素的范围。但是，这是我的情况：

我有一个水平列表，其中每个列表项都应该具有悬停效果，其中一个小箭头位于项目顶部。仅仅定位背景是行不通的，因为列表项与文本一样高。任何位于框外的东西都会被切断。

我读到了一个解决方案，在每个列表项中都有一个额外的元素，它只包含图像。

有没有办法简单地改变列表项的高度，例如使框更高，以便背景图像留在框内？

4

1 回答 1

2

这是您正在寻找的答案吗？

http://jsfiddle.net/fmpeyton/G5VVj/1/

HTML：

<ul>
    <li><a href="#">Page1</a></li>
    <li><a href="#">Page2</a></li>
    <li><a href="#">Page3</a></li>
    <li><a href="#">Page4</a></li>
    <li><a href="#">Page5</a></li>
</ul>

CSS：

li{height: 50px; width:30px; margin:0 10px; float:left; list-style:none;}
li:hover{background: url('http://www.dreamtemplate.com/dreamcodes/web_icons/gray-bold-up-arrow-icon.png') top center no-repeat;}
a{padding:20px 0; display:block;}

策略是在元素中包含一个元素，并为父元素提供一个:hover伪类，该类在悬停时更改背景。

于 2013-04-19T22:54:31.407 回答