2017-04-21 21 views
0

나는 실수를해서 내 눈이 어두워 짐을 알고 있습니다. 그래서 내가 내 문제를 찾도록 도와달라고 부탁하고있다. 밑줄은 호버에 나타나지 않는다. 당신이 (이 때문에 바보 편집기의) fidle 순 슬래시 t4fmuxbL에서 찾을 수 있습니다CSS 호버가 작동하지 않습니다 (밑줄을 표시해야 함)

바이올린

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>

+0

: 그 <a>

CSS의 아이가 아닌 다른 요소) 이 어리석은 편집장에서도. – Roberrrt

답변

0

당신이 밑줄 새로운 <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>

+0

이 밑줄이 필요합니다 - http://prntscr.com/ezajhz –

+0

': before' 또는': after'' 의사 요소를 사용하여 이것을 모방합니까? – Roberrrt

+0

나는 시도했지만 잘못된 효과 (다른 곳에서 줄이 나타남)를 보았습니다. 사실 나는 전에 그것을 한 적이 없었고 어떻게 해야할지 모르겠다 ... 다른 div들과 함께 옵션이 있다는 것을 읽어 들여 ... –

0

당신은 텍스트 장식을 추가해야합니다 : 밑줄; 위로 마우스를 가져 가면

+0

이것은 질문의 구체적인 내용에 대답하지 않는다 – Roberrrt

0

다음을 사용하여 다음을 수행 할 수 있습니다. after pseudo 요소 : 현재 HTML 구조로 링크에 마우스를 올려 놓을 수 없으며 div (또는

.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 당신은 fiddl을 포함 할 수 있습니다

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

고마워요! 완벽하게 작동합니다. –