css - CSS - 如何使标签包围 li

Question

我尝试制作一个水平列表

我尝试在悬停每个项目（文本和点）时制作，然后当悬停<a>标签时光标相同

但是对于悬停是正确的，text而不是对两者都dot适用text。

第一个问题：我不能让宽度自动包含dot和text。
第二：我认为a标签必须被包围li才能做到：同时悬停（点和文本）。

如何使这项工作。谢谢

这是我的代码http://jsfiddle.net/Q6CZ2/

<div id="wrap">
      <ul id="navbar">
         <li><a href="#">Exhibits and Events</a>
         </li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Press</a></li>
      </ul>
   </div>

Answer 1

试试这个小提琴

它将“li”标签包装在“a”标签中，如下所示：

<a href="#"><li>Exhibits and Events
     </li></a>

这可能是你想要的。

至于你的第二个问题尝试删除：

* {
padding:0px;
margin:0px;
}

和：

#wrap {
margin: 50px;
width:600px;
height:40px;
}

也试试这个小提琴

Answer 2

如果我正确理解你的问题，你想使用：

li{
    cursor:pointer;
}

虽然我不知道你为什么想要那个光标，因为这个点仍然不能作为一个链接。

Answer 3

1. 如果li要更改公告标记的光标，则需要更改悬停的光标
2. 因为你有规则#wrap a，所以它覆盖了规则应用的颜色#wrap li:hover

尝试

#wrap li:hover, #wrap li:hover a{
    color: #CCC;
    cursor: pointer;
}

演示：小提琴

Answer 4

您可以使用以下方法将标签保留在<a>标签内<li>：

* {
    padding:0px;
    margin:0px;
}
#wrap li {
    float:left;
}
#wrap {
    /*border: 1px solid #000;*/
    margin: 50px;
    width:600px;
    height:40px;
}
#wrap li {
    width:150px;
    color:green;
}
#wrap a {
    margin-left:-20px;
    padding-left:20px;
    color:green;
    text-decoration:none;
    display:block;
}
#wrap li:hover,
#wrap li:hover a {
    color: #CCC;
}

http://jsfiddle.net/Q6CZ2/9/