bootstrap导航栏问题

people_nearby 2017-12-30 08:17:41
li里面的a标签hover无效,应该是样式优先级的问题,不知道怎么改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style type="text/css">
#d1{
float: left;
margin-top:16px;
width: 208px;
}
span{margin-left: 10px;}
.navbar-inverse .navbar-nav > li > a {color: white}
a:hover{background: white;color: black;}
</style>
</head>
<body>
<nav class="navber navbar-header navbar-fixed-top navbar-inverse" style="height: 50px">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<div id="d1">
<span class="glyphicon glyphicon-fast-backward" style="color: white"></span>
<span class="glyphicon glyphicon-pause" style="color: white"></span>
<span class="glyphicon glyphicon-play" style="color: white"></span>
<span class="glyphicon glyphicon-stop" style="color: white"></span>
<span class="glyphicon glyphicon-fast-forward" style="color: white"></span>
</div>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">小说</a></li>
<li><a href="#">大事件</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
...全文
601 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
我叫陈小皮。 2018-01-09
  • 打赏
  • 举报
回复
如果是所有a都有这个hover的效果,你可以利用important提高其优先级
qq_35269473 2018-01-09
  • 打赏
  • 举报
回复
.navbar-inverse .navbar-nav > li > a:hover只要详细指出他的位置就可以啦,单独一个a指向不明确

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧