Question

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

<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之外的任何东西，这应该是可能的，因为它仍然有效，当我仍在使用nav元素时。

我很喜欢css，也许我错过了一些非常简单的细节。

提前致谢。

Answer 1

看我在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>

Answer 2

不是修改导航栏内容，只是尝试更改你指向的东西的动画，我的意思是，而不是悬停var jsonObject = JObject.Parse(jsonData); string value = jsonObject["jsonString1"].ToString();组件只是让其中的文字悬停

<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>不会悬停多个重叠的CSS格式

悬停事件的背景颜色更改无效

2 个答案: