我在 Bootstrap 中添加了这个菜单。 我希望它们以下列方式显示:
- case-1:如果菜单下拉然后显示文本颜色为白色， 背景色绿色。
- case-2:如果有任何菜单选项被悬停，则反转它们的颜色 悬停效果。
但是 <a> 标签没有获得我在 <ul> 类“菜单”中定义的颜色 下所有 <a> 标签驻留。我想改变它们的颜色，以便其他 <a> 菜单外的标签不会改变它们的样式。
请检查下面给出的图片:
请建议我解决这个问题。
这是源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color <a href="" target="_blank">Information wrong color</a></li>
<li><a href="" target="_blank">Information wrong color</a></li>
<li><a href="" target="_blank">Information wrong color</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>如果需要任何进一步的信息，请告诉我。 谢谢:)
最佳答案
您需要定位 Ul > Li 中的“a 标签”。
至于悬停状态，只需将“:hover”添加到您要为其提供自定义悬停状态 CSS 的内容即可。
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu li a{
color: #FFFFFF;
}
.menu li a:hover{
color: #000000;
}
</style>
关于html - 如何在悬停效果中更改html ul中的颜色和反转颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34430755/