1

在我的 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;
}

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

我设法在 JS Bin中重新创建了我的问题。当用户将鼠标悬停在“媒体”选项卡上时，选项卡的背景会发生变化，但文本颜色不会。

4

2 回答 2

3

简短的回答是这样的：

代替：

#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。

于 2013-07-21T22:15:20.710 回答
0

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

  • 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;
}
    • 于 2013-07-21T22:28:15.360 回答