CSS：懸停僞不能在導航項目上工作

我在菜單項上遇到了一個問題：懸停僞造。我使用Bootstrap並使用我自己的樣式表覆蓋。我已經在社區上研究了一下，發現我不能應用：將鼠標懸停在內嵌塊元素上，但這是一個塊元素。我想可能引導類不知何故重寫：懸停，但我已經在html頭中的boostrap.css之後調用了我的custom.css，所以...CSS：懸停僞不能在導航項目上工作

這是my fiddle，代碼如下。

.nav-item { 
 
    font-family: LubalinGraphStd-Medium; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: 1.1em; 
 
    margin-top: 30px; 
 
    margin-left: 28px; 
 
    color: #444b4b; 
 
    height: 50px; 
 
} 
 

 
.navbar-default .navbar-nav li a:hover { 
 
    color: #009ca6; 
 
} 
 

 
.nav-item-register { 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-color: #009ca6; 
 
    color: #009ca6; 
 
} 
 

 
.nav-item-register:hover { 
 
    background-color: #009ca6; 
 
}

<div id="navbar" class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item nav-item-register" href="#register">Register</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--/.navbar-collapse -->

任何線索和/或幫助將不勝感激，謝謝！

來源

2017-04-21 Marc

什麼是你期望請具體行爲？ –

它似乎在小提琴（使用Firefox）（即'nav-item-register'）中工作正常，並且從代碼的外觀來看，這應該可以工作。你有沒有試過追加討厭的'！important'標籤？如果解決了這個問題，至少你知道Bootstrap或其他CSS會覆蓋它。 – Tijmen

你使用什麼版本的boostrap？在引導程序4中工作（如果您刪除導航欄默認選擇器）：http://www.bootply.com/KZDkdSKvfE – Pete

您的CSS選擇器不匹配給定代碼中的任何元素。是否有更多的代碼丟失（即對<div id="navbar" class="navbar-collapse collapse">任何父元素？

.navbar-default .navbar-nav li a:hover如果添加<div class="navbar-default">解決此代碼塊不會因爲有一類的navbar-default沒有元素匹配的任何元素。

，它的工作原理;小提琴這裏：https://jsfiddle.net/wcso43a1/2/全碼：

<div class="navbar-default"> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a class="nav-item" href="item.html">item</a> 
       </li> 
       <li> 
        <a class="nav-item" href="item.html">item</a> 
       </li> 
       <li> 
        <a class="nav-item" href="item.html">item</a> 
       </li> 
       <li> 
        <a class="nav-item nav-item-register" href="#register">Register</a> 
       </li> 
      </ul> 
    </div><!--/.navbar-collapse --> 
</div><!-- end of navbar-default --> 

<!-- CSS --> 

.nav-item { 
    font-family: LubalinGraphStd-Medium; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 1.1em; 
    margin-top: 30px; 
    margin-left: 28px; 
    color: #444b4b; 
    height: 50px; 
} 

.navbar-default .navbar-nav li a:hover{ 
    color: #009ca6; 
} 

.nav-item-register { 
    border-style: solid; 
    border-width: thin; 
    border-color:#009ca6; 
    color: #009ca6; 
} 

.nav-item-register:hover { 
    background-color: #009ca6; 
}

來源

2017-04-21 15:14:42

所有這些類都是標準的引導程序3類，並且使用！對於懸停背景很重要我已經確定bootstrap.css是重寫的。 – Marc

我不確定我遵循 - 上述代碼似乎在jsfiddle中工作。我已經更新了這裏的小提琴，以包含引導CSS/JS，仍然適用於我：https://jsfiddle.net/wcso43a1/3/。如果仍然有些東西不能工作，你可以發佈一個更完整的代碼示例，或者用不同的方式解釋什麼不起作用，因爲那些懸停的小工具可以很好地工作嗎？ –

它對我來說也完全工作，但那是因爲導航欄默認類與某些方面衝突：懸停在.nav-item-register上。我最終通過完全刪除navbar默認類來修復它（就像你在你的小提琴中那樣）......現在它的工作很棒。謝謝！ – Marc

你可以這樣說：

.nav-item:hover { 
    color: pink; 
}

。 0

更新Fiddle

來源

2017-04-21 15:16:36 lddz

只需使用.nav-item:hover作爲選擇的徘徊（而不是.navbar-default .navbar-nav li a:hover

.nav-item { 
 
    font-family: LubalinGraphStd-Medium; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: 1.1em; 
 
    margin-top: 30px; 
 
    margin-left: 28px; 
 
    color: #444b4b; 
 
    height: 50px; 
 
} 
 

 
.nav-item:hover { 
 
    color: #009ca6; 
 
} 
 

 
.nav-item-register { 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-color: #009ca6; 
 
    color: #009ca6; 
 
} 
 

 
.nav-item-register:hover { 
 
    background-color: #009ca6; 
 
}

<div id="navbar" class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item" href="item.html">item</a> 
 
    </li> 
 
    <li> 
 
     <a class="nav-item nav-item-register" href="#register">Register</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--/.navbar-collapse -->

來源

2017-04-21 16:23:55 Johannes

我在詢問nav-item-register懸停操作，但是關於您的評論：我曾嘗試將您的建議懸停在其他nav-items上，並且它不起作用。出於某種原因，bootstrap.css重寫了一大堆我的custom.css ...我確定它是一個繼承的東西，但說實話，我仍然試圖在覆蓋引導樣式時如何工作。在這一點上，我只是！重要的一切，不工作，直到我知道了。 – Marc

CSS：懸停僞不能在導航項目上工作

回答

相關問題