悬停事件的背景颜色更改不起作用答案

【问题标题】：Background-color change on hover event not working悬停事件的背景颜色更改不起作用
【发布时间】：2015-08-14 11:04:24
【问题描述】：

我遇到了 CSS 悬停事件的问题。我创建了一个顶部带有导航栏的页面。出于兼容性原因，我不得不放弃导航并将其更改为简单的 div。（nav 在 IE8 中是未知的，但它仍然必须在那里工作。）

<div class="nav">
 <ul>
   <li> <a> Something </a>
      <ul>
        ....
      </ul>
   </li>
   ....
 </ul>
</div>

这导致我的导航栏上的悬停不再起作用。但事实并非如此，没有任何工作，只有以下行中的第一行不再起作用。背景根本没有改变。

.nav ul li:hover { background: #BFBFBF; }  - not working
.nav ul li:hover > a { color:#FFFFFF; }    - working perfectly fine
.nav ul li:hover > ul { display:block; }   - working perfect as well
.nav ul {
  background: #404040;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 30px;
  text-align:left;
  display:block;
}

我基本上仔细检查了我所知道、怀疑或发现的所有内容，这可能是我的问题的根源，但我仍然无法让它恢复工作。我尝试使用背景颜色而不是背景，但没有成功。我想做到这一点而不必使用除 HTML 和 CSS 之外的任何东西，这应该是可能的，因为当我仍在使用导航元素时它有效。

我对 css 很陌生，也许我错过了一些非常简单的细节。

提前致谢。

【问题讨论】：

你能把你的代码放在小提琴上吗？
请在 demo 或 jsfiddle..thanx 中提供您的代码
.nav ul li 还有哪些其他 CSS 可供您使用？也许它没有任何维度？
@putvande: .nav ul li 只有display:inline 是水平的。将在帖子中添加.nav ul CSS

标签： html css

【解决方案1】：

与其修改导航栏内容，不如尝试更改您指向的东西的动画，我的意思是，与其悬停<li>组件，不如让其中的文本悬停

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .2s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

尝试定义 <a> 元素并将其悬停在整个 <li> 不会悬停多个重叠的 CSS 格式

【讨论】：

效果很好，看起来比我目前所取得的任何成果都要好，感谢transition，谢谢！

【解决方案2】：

看到我在 html 中创建了一些东西。而且您的代码正在运行。如果您可以粘贴您的html，那就太好了

<head runat="server">
<title></title>
<style type="text/css">
    .nav ul li:hover {
        background: #BFBFBF;
    }

        .nav ul li:hover > a {
            color: #FFFFFF;
        }

        .nav ul li:hover > ul {
            display: block;
        }
</style>

        <nav class="nav">
            <ul>
                <li>
                    <a>Li 1</a>
                </li>
                <li>
                    <ul>
                        <li>Li 2
                        </li>
                    </ul>
                </li>
                <li>Li 3
                </li>
            </ul>
        </nav>

【讨论】：

我不能使用nav，因为它也必须在 IE8 中工作。有那个解决方案，因为我只在更高版本的 IE 和 Chrome 中查看页面。然后我使用了 IE8，一旦意识到我将无法使用nav。