1

When I mouse over a list element, the transition occurs correctly, however when I mouse over (hover over) a list element with a link the text will not transition until I specifically mouse over the text itself.

Here's a GIF of the problem(sorry for the lack of a cursor -- 'Home' is a link within a list and 'example1' is merely a list):

enter image description here

It strikes me I may be a bit vague here. Here it is uploaded in its current form - the CSS responsible for that navbar is within the /* dropdown */ boxes.

The source in its entirety is all there on that webpage if you inspect element. (I tried putting it here but the code tag is refusing to work.)

4

2 回答 2

1

这是因为您的标签li和标签之间有空格a。您需要将子菜单中的所有样式应用于a标签，而不是li.

所以，而不是拥有

li {
    padding:5px
}

有

li a {
   padding: 5px
}

对悬停做类似的事情。将悬停类附加到a，而不是li.

编辑：

或者，指定:hover { color :#fff; }到li（它当前位于a.

于 2013-03-28T18:37:08.277 回答
0

让您的锚元素占据菜单项的完整空间通常是件好事。这有两个目的：

  1. 它可以对区域内任何地方的事件做出反应。
  2. 用户不必“寻找”来找到可点击/可触摸的区域。

具体来说，我建议将锚点的显示设置为blockor inline-block，并填充它们（不是包含<li>元素）。

这是一个简单的例子：http: //jsfiddle.net/zzjZY/3/

CSS

LI {
    width: 200px;
    border: 1px solid red;
}
A {
    display: block;
    padding: 8px;
}
A:hover {
    -webkit-transition:color 300ms ease-in-out;
    -moz-transition:color 300ms ease-in-out;
    color:#fff;
    background-color:#060;
}

HTML

<ul>
    <li><a href="http://stackoverflow.com">a little text</a></li>
    <li><a href="http://stackoverflow.com">a little text</a></li>
    <li><a href="http://stackoverflow.com">a little text</a></li>
</ul>

您将看到:hover格式应用于包含元素内的任何位置，因为锚完全填充了它。该链接也可以在包含列表项内的任何位置单击。

于 2013-03-28T18:40:55.560 回答