CSS懸停不起作用（需要顯示下劃線）

我想我有一些錯誤，我的眼睛找不到問題。所以我要求你幫我找到我的問題 - 下劃線不要顯示在懸停。CSS懸停不起作用（需要顯示下劃線）

您可以通過FIDLE淨斜線t4fmuxbL發現（因爲這個愚蠢的編輯器）

小提琴

body, div, span, ul, li { 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-family:"Agency FB"; 
 
} 
 

 
li, a { 
 
\t list-style-type:none; 
 
\t text-decoration:none; 
 
\t color:white; 
 
\t font-size:14px; 
 
} 
 

 
li { 
 
\t display:inline-block; 
 
\t margin:28.5px 5px 5px 35px; 
 
} 
 

 
.underline-div { 
 
\t border-top:3px solid #FFB700; 
 
\t width:12px; 
 
\t float:left; 
 
\t margin-left:41px; 
 
\t margin-top:-3px; 
 
\t display:none; 
 
} 
 

 
#und-div2 { 
 
\t margin-left:56px; 
 
\t width:22px; 
 
} 
 

 
#und-div3 { 
 
\t margin-left:56px; 
 
\t width:18px; 
 
} 
 

 
#und-div4 { 
 
\t margin-left:55px; 
 
\t width:36px; 
 
} 
 

 
#news:hover #und-div1 { 
 
\t display:block; 
 
} 
 

 
#forums:hover #und-div2 { 
 
\t display:block; 
 
} 
 

 
#blogs:hover #und-div3 { 
 
\t display:block; 
 
} 
 

 
#statistics:hover #und-div4 { 
 
\t display:block; 
 
} 
 

 

 

 
.page, .header { 
 
\t padding:0; 
 
} 
 

 
.page { 
 
\t border:1px solid black; 
 
\t height:1200px; 
 
\t min-width:1265px; 
 
\t width:100%; 
 
} 
 

 
.header-bg { 
 
\t height:655px; 
 
\t border:1px solid black; 
 
\t background:url("http://pokkers.lv/photo-bg.jpg"); 
 
\t background-size:cover; 
 
} 
 

 
nav { 
 
\t display:block; 
 
\t width:100%; 
 
\t height:75px; 
 
\t background-color:rgba(0,0,0,0.2); 
 
} 
 

 
.main-nav { 
 
\t width:380px; 
 
\t height:75px; 
 
} 
 

 
.left-nav{ 
 
\t margin-left:200px; 
 
\t position:absolute; 
 
\t top:0; 
 
} 
 

 
.right-nav { 
 
\t margin-right:200px; 
 
\t float:right; 
 
} 
 

 
.side-div { 
 
\t border:1px solid white; 
 
}

<body> 
 
\t \t <div class = "col-md-12 page"> 
 
\t \t \t <header class = "col-md-12 header"> 
 
\t \t \t \t <div class = "header-bg"> 
 
\t \t \t \t \t <nav> 
 
\t \t \t \t \t \t <div class = "left-nav main-nav"> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li id = "news"><a href = "#">NEWS</a></li> 
 
\t \t \t \t \t \t \t \t <li id = "forums"><a href = "#">FORUMS</a></li> 
 
\t \t \t \t \t \t \t \t <li id = "blogs"><a href = "#">BLOGS</a></li> 
 
\t \t \t \t \t \t \t \t <li id = "statistics"><a href = "#">STATISTICS</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t <div class = "underline-div" id = "und-div1">&nbsp;</div> 
 
\t \t \t \t \t \t \t <div class = "underline-div" id = "und-div2">&nbsp;</div> 
 
\t \t \t \t \t \t \t <div class = "underline-div" id = "und-div3">&nbsp;</div> 
 
\t \t \t \t \t \t \t <div class = "underline-div" id = "und-div4">&nbsp;</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class = "right-nav main-nav"> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li><a href = "#">SERVERS</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href = "#">BANLIST</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href = "#">MARKET</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href = "#">CONTACTS</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </nav> 
 
\t \t \t \t </div> 
 
\t \t \t </header> 
 
\t \t </div> 
 
\t </body>

來源

2017-04-21 Karlis Pokkers

您可以嵌入fiddl在這個愚蠢的編輯器中也是如此。 – Roberrrt

我不太知道爲什麼你正在使用新<div>元素作爲下劃線，但要切入點：

在當前的HTML結構中，不可能選擇帶有懸停的div。

爲什麼不加一個簡單的text-decoration: underline到初始<li>當你把它懸停？你可以可以然後簡單地解決<a>標籤，我已經更新了你的代碼在這裏：

body, div, span, ul, li { 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-family:"Agency FB"; 
 
} 
 

 
li, a { 
 
\t list-style-type:none; 
 
\t text-decoration:none; 
 
\t color:white; 
 
\t font-size:14px; 
 
} 
 

 
li { 
 
\t display:inline-block; 
 
\t margin:28.5px 5px 5px 35px; 
 
} 
 

 
li a:hover { 
 
\t border-bottom:3px solid #FFB700; 
 
} 
 

 
.page, .header { 
 
\t padding:0; 
 
} 
 

 
.page { 
 
\t border:1px solid black; 
 
\t height:1200px; 
 
\t min-width:1265px; 
 
\t width:100%; 
 
} 
 

 
.header-bg { 
 
\t height:655px; 
 
\t border:1px solid black; 
 
\t background:url("http://pokkers.lv/photo-bg.jpg"); 
 
\t background-size:cover; 
 
} 
 

 
nav { 
 
\t display:block; 
 
\t width:100%; 
 
\t height:75px; 
 
\t background-color:rgba(0,0,0,0.2); 
 
} 
 

 
.main-nav { 
 
\t width:380px; 
 
\t height:75px; 
 
} 
 

 
.left-nav{ 
 
\t margin-left:200px; 
 
\t position:absolute; 
 
\t top:0; 
 
} 
 

 
.right-nav { 
 
\t margin-right:200px; 
 
\t float:right; 
 
} 
 

 
.side-div { 
 
\t border:1px solid white; 
 
}

<body> 
 
\t <div class = "col-md-12 page"> 
 
\t \t <header class = "col-md-12 header"> 
 
\t \t \t <div class = "header-bg"> 
 
\t \t \t \t <nav> 
 
\t \t \t \t \t <div class = "left-nav main-nav"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li id = "news"><a href = "#">NEWS</a></li> 
 
\t \t \t \t \t \t \t <li id = "forums"><a href = "#">FORUMS</a></li> 
 
\t \t \t \t \t \t \t <li id = "blogs"><a href = "#">BLOGS</a></li> 
 
\t \t \t \t \t \t \t <li id = "statistics"><a href = "#">STATISTICS</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class = "right-nav main-nav"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href = "#">SERVERS</a></li> 
 
\t \t \t \t \t \t \t <li><a href = "#">BANLIST</a></li> 
 
\t \t \t \t \t \t \t <li><a href = "#">MARKET</a></li> 
 
\t \t \t \t \t \t \t <li><a href = "#">CONTACTS</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </nav> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t </div> 
 
</body>

來源

2017-04-21 20:52:59 Roberrrt

我需要像這樣下劃線 - http://prntscr.com/ezajhz –

使用'：before'或'：after'僞元素來模擬這個？ – Roberrrt

我試過了，但有錯誤的效果（線條出現在不同的地方）。事實上，我從來沒有這樣做過，不知道如何...只是在堆棧中閱讀，有其他div的選項... –

您必須添加文本裝飾：下劃線; 懸停的項目

來源

2017-04-21 20:56:08 Alireza

這不回答的問題 – Roberrrt

下面是一個如何使用以下方法實現此功能的示例：僞元素之後，因爲當前的HTML結構不允許將鼠標懸停在鏈接上，並顯示div（或任何其他元素）是不是<a>

CSS的孩子：

.main-nav a { 
    position: relative; 
    text-decoration: none 
    } 

    .main-nav a:after { 
    content: ''; 
    display: none; 
    height: 2px; 
    background: #f00; 
    width: 100%; 
    bottom: 0px; 
    left: 0px; 
    position: absolute; 
    } 

    .main-nav a:hover:after, 
    .main-nav a:focus:after { 
    display: block; 
    }

演示HTML

<ul class="main-nav"> 
    <li> 
    <a href="#!"> 
     Link 
    </a> 
    </li> 
</ul>

來源

2017-04-21 21:52:45 scottohara

謝謝先生！完美的作品。 –

CSS懸停不起作用（需要顯示下劃線）

回答

相關問題