Question

所以我在这里想要做的是一个简单的水平css菜单，但是，每当用户将鼠标悬停在列表中的某个项目上时，我希望在所述项目上方显示一个小三角形这是我到目前为止所提出的 HTML：

<div id="navbar2">
        <div id="navholder">
            <ul id="nav2">
                   <li>
                        <a href="#">category one</a>
                   </li>
                   <li>
                        <a href="#">section two</a>
                   </li>
                   <li>
                        <a href="#">articles</a>
                   </li>
                   <li>
                        <a href="#">posts here</a>
                   </li>
                   <li>
                        <a href="#">category two</a>
                   </li>
            </ul>
        </div>
  </div>

并且css适用于它：

ul#nav2
{
    background:url('images/redbar.png');
    list-style-type:none;
    height:50px;
}
#navbar2 ul li
{
    height:50px;
    display:inline;
    line-height:35px;
    padding-left:19px;
}
#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background:url('images/Project_0040_Layer-21.png') no-repeat;
 }
 #navbar2 ul li a 
{
    color:#fff;
    text-decoration:none;
    font-size:10pt;
    }

即使我指定顶部中心的背景位置，它根本不会显示出来...... 我究竟做错了什么？链接到jsfiddle： http://jsfiddle.net/wWMjF/1/，我基本上想要文本上方的小三角形，指向它而不是侧面

Answer 1

将背景样式保存为一行：

#navbar2 ul li:hover
{  
    height:50px;
    background:url('http://i.imgur.com/dyj8m.png') no-repeat center 0;
}

请参阅updated fiddle sample。

Answer 2

使用background速记属性会将所有未指定的属性设置为其初始值：

'background'属性是一种速记属性，用于在样式表中的同一位置设置大多数背景属性。 [...]给定一个有效的声明，对于每一层，速记首先设置每个“背景图像”，“背景位置”，“背景大小”，“背景重复”，“背景 - ”的相应图层。 origin'，'background-clip'和'background-attachment'到该属性的初始值，然后在声明中指定为该图层指定的任何显式值。

使用

#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background-image:url('images/Project_0040_Layer-21.png');
    background-repeat: no-repeat;
 }

或

#navbar2 ul li:hover 
 {  
    height:50px;
    background:url('images/Project_0040_Layer-21.png') no-repeat 50% 0%;
 }

为了避免这种情况。

Answer 3

我为你敲了这个。可能有一些用处。

http://jsfiddle.net/wWMjF/11/

图像在悬停时通过列表的元素

3 个答案: