Question

我有这个HTML菜单结构：

<ul>
  <li>
    <a href="#">
      <span class="cl1">item</span>
      <span class="cl2">price</span>
    </a>
  </li>
  ...

和CSS：

ul {
  list-style-type: none;
  li {
    display: inline-block; 
    padding: 5px 10px;
    a {
      width: 100%;
      height: 100%;
      span {
        display: block;
      }
    }
  }
}

问题是，如果我将光标移动到<li>，则链接仍未激活，我必须将光标移动到完全链接上。

如果我将光标移到li标签上，我想实现一个有效的链接，我该怎么做？

Answer 1

默认情况下，锚元素设置为内联元素。在添加宽度属性之前，您需要明确地将其显示设置为阻止：

a {
    display: block;
}

请参阅此jsFiddle。

Answer 2

提供<a> display: block;，它应该占用列表项的可用空间，因此完全“可点击”..

Answer 3

只需添加li:hover规则：

li:hover {
    background-color:yellow;
}

http://jsfiddle.net/b6egd/

如何使悬停活跃的整体<li>，而不仅仅是<a>?</a> </li>

3 个答案: