Question

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

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

我读到了一个解决方案，其中每个列表项中都有一个附加元素来保存图像。

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

Answer 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伪类，以便在悬停时更改背景。

背景图象在箱子外面在水平的锂项目

1 个答案: