列表項上的覆蓋引導樣式 <li> 表現不符合預期
[英]Overriding bootstrap styling on a list item <li> not behaving as expected
問題描述
我不是網絡層人員，因此如果這是一個愚蠢的問題，我深表歉意。
我試圖在懸停時添加下划線boostrap下拉菜單項，並收到一條錯誤消息，指示我具有無效的屬性值。 我經歷了一堆旋轉，但是當前代碼看起來像這樣。
HTML：
<li class="dropdown"><a href="#" class="dropdown-toggle header-link"
data-toggle="dropdown">Clubs <span class="caret"></span></a>
並在css文件中：
a.header-link {
a.hover {
text-decoration:underline;
}
}
任何幫助將不勝感激。
我認為顯示所有HTML可能會有所幫助，所以...
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rugby Clubs</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<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>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<a href="#" class="navbar-brand">RUGBY</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle header-link"
data-toggle="dropdown">Clubs <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Womens Rugby</a></li>
<li><a href="#">Mens Rugby</a></li>
<li><a href="#">High School Girls Rugby</a></li>
<li><a href="#">High School Boys Rugby</a></li>
</ul></li>
<li><a href="#">Events</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign In</a></li>
<li><a href="#">Join</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS：
a.header-link:hover {
text-decoration:underline;
}
謝謝。
3 個解決方案
解決方案1
2 已采納 2016-01-02 19:18:49
我假設通過嵌套使用LESS或SCSS。 在這種情況下，請執行以下操作：
a.header-link {
&:hover {
text-decoration:underline;
}
}
您編寫的內容將進行編譯，因為.header-link中有一個錨標記子級，其中包含一個類“ hover”。 而且您在HTML中沒有。 您有一個圖標代替；）
如果您不使用LESS或SCSS，則不要嵌套。 您在我提到的處理器中只能做這些事情。 改為這樣做：
a.header-link { something }
a.header-link:hover {
text-decoration:underline !important;
}
解決方案2
2 2016-01-02 19:21:33
嘗試這個：
.header-link{
text-decoration:none;
}
.header-link:hover{
text-decoration:underline;
}
解決方案3
2 2016-01-02 19:22:12
應該是這樣的：
a.header-link:hover {
text-decoration:underline;
}
Bootstrap 3自定義li項目div樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.