Question

在我的HTML5代码中，我使用列表在导航栏中创建标签。

<div id="nav_tabs">
 <ul>
  <a href="Index_V2.html"> 
   <li>
   Home
   </li>
  </a>
  <a href="#media"> 
   <li>
   Media
   </li>
  </a>
  <a href="#agenda"> 
   <li>
   Agenda
   </li>
  </a>
 </ul>
</div>

当用户将鼠标悬停在其中一个标签上时，背景颜色和文字颜色会发生变化。但是，对于我的列表中的“媒体”选项卡，我添加了一个下拉菜单。 HTML的目的是：

<a href="#media"> 
<li>
 Media
 <ul class="submenu">
  <a href="media_music.html"><li>Music</li></a>
  <a href="media_photo.html"><li>Photo</li></a>
  <a href="media_video.html"><li>Video</li></a>
  <a href="media_band.html"><li>Band</li></a>
  <a href="media_interview.html"><li>Interviews</li></a>
  <a href="media_archive.html"><li>Archive</li></a>
 </ul>
</li>

下拉菜单有效，媒体标签背景颜色在悬停时会变为白色。不幸的是，选项卡中的“媒体”文本仍保持原始颜色。

这是处理颜色变化等的CSS：

nav {
width: auto;
text-transform: uppercase;
background: #ff4e00;
height: 50px;
}
nav a {
color: white;
}
nav ul {
list-style-type: none;
margin: 0 auto;
margin-left: 0px;
}
nav ul li {
height: 35px;
margin: 0px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
float: left;
text-align: center;
color: white;
font-size: 26px;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
}
#nav_tabs ul li:hover {
background: white;
color: #ff4e00;
}
.submenu {
position: relative;
width: 10px;
top: 17px;
right: 15px;
padding: 0px;
margin: 0px;
display: none;
background: black;
}
.submenu li {
background: #ff4e00;
width: 150px;
}
li:hover .submenu {
display: block;
}

我试图让“媒体”链接文本更改为与所有其他文本相同的颜色，但由于链接/列表顺序不同，它显然不起作用。我试过用：

#nav_tabs ul a:hover {
    color: #ff4e00;
}

但是这只会在用户将鼠标悬停在链接/文本上时更改文本的颜色。当用户将鼠标悬停在我正在寻找的标签上时，它不会改变文本的颜色。

我设法重新创建了我的问题here in JS Bin。当用户将鼠标悬停在“媒体”标签上时，标签的背景会发生变化，但文字颜色不会更改。

Answer 1

简短的回答是：

而不是：

#nav_tabs ul a:hover {
    color: #ff4e00;
}

这样做：

#nav_tabs ul:hover a {
    color: #ff4e00;
}

你可以将：hover放在CSS选择器链中的任何元素上，它不必放在最后一个元素上。这意味着当您将鼠标悬停在UL上时，所有子锚标记都将获得样式。

但更长的答案是你的HTML格式不正确。您有<ul>标记中的空锚标记，而不是包含在<li>元素中。您还有包含<li>元素而不是内部元素的锚标记。

这意味着你的整个级联关系将会被取消。这是经过修改的HTML（为了简单起见，我删除了一些内容，我会让你在使用这个新结构作为指南时添加它）：

<body>
  <nav id="nav_tabs">
    <ul>
      <li><a href="Index_V2.html">Home</a></li>
      <li>
        <a href="#media">Media</a>
        <ul class="submenu">
          <li><a href="media_music.html">Music</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

然后你应该能够相应地调整CSS。

Answer 2

正如评论中提到的那样，您的HTML无效，有效的chields只是

s（你必须把它们放在里面）。在你的代码中，当浏览器解析它时..标签被替换，你的css不匹配。

以下是经过编辑的代码：http://jsbin.com/ofapac/8/edit

<nav>
    <div id="nav_tabs">
        <ul> 
            <li>
                <a href="Index_V2.html">Home</a>
            </li> 
            <li>
                <a href="#media">Media</a>
                <ul class="submenu">
                    <li><a href="media_music.html">Music</a></li>
                    <li><a href="media_photo.html">Photo</a></li>
                    <li><a href="media_video.html">Video</a></li>
                    <li><a href="media_band.html">Band</a></li>
                    <li><a href="media_interview.html">Interviews</a></li>
                    <li><a href="media_archive.html">Archive</a></li>
                </ul>
            </li> 
            <li>
                <a>Agenda</a>
            </li> 
            <li>
                <a>Contact</a>
            </li>

        </ul>
    </div>
</nav>

第二件事，标签不会从父标签继承字体设置，因此您必须明确指定它。 CSS底部还有2行。

nav ul li a{
  color: white;
}
nav ul li:hover > a{
    color: #ff4e00;
}

将鼠标悬停在列表上时如何更改HTML链接的颜色？

2 个答案: