A : 호버가 UL 및 LI에서 작동하지 않음

안녕하세요! 저는 현재 CSS, HTML5, Javascript 및 PHP의 기초를 배우기 위해 개인적이고 평범한 웹 사이트를 만드는 중입니다. 내 웹 사이트의 상단에 불투명도가있는 간단한 배너 인 내비게이션 배너가 있습니다. 그러면 순서가 지정되지 않은 목록을 사용하여 오른쪽 상단에 탐색 링크가 표시되고 CSS 문서를 통해 탐색됩니다. 여기 A : 호버가 UL 및 LI에서 작동하지 않음

목록에 내 코드입니다 : 나는 개인적으로이에 문제가 표시되지 않습니다 내가 탐색 분할 태그의 내부에 디바이더를

<div id="list"> 
    <ul> 
     <li><a href="#" style="text-decoration: none; color: white;">Home</li> 
     <li><a href="#" style="text-decoration: none; color: white;">Downloads</li> 
    </ul> 
    </div>

, 또한 내 CSS 코드는 아래와 같습니다 :

a:hover 
{ 
    color: black; 
    border: 1px #EEE; 
}

나는 비 순차 목록뿐만 아니라 주 분배기에 대한 구분선 ID를 포함하는 직접 위치를 지정하는 대체 코드를 사용했지만 아직 작동하지 않습니다. 당신이 저를 도울 수 있다면 당신이 어떤 이미지 또는 추가 코드가 필요하면 알려주십시오 알려 주시기 바랍니다. 고마워, 나이트.

출처

2014-09-11 Knight

인라인 스타일은 CSS 스타일을 재정의를 참조하십시오. 인라인 스타일을 사용하지 마십시오.이 스타일은 "나쁜 형식"이며 정확하게 이런 종류의 문제가 발생합니다. –

이 인라인 스타일 color: white;이 (가) a:hover { color: black; } 스타일보다 우선합니다. CSS 특이성에 대한 검색을 통해 자세한 정보를 얻을 수 있습니다.

인라인 스타일 (style 속성)을 제거하려고합니다. 일반적으로 사용하지 않는 것이 좋습니다.

대신보십시오 :이 작업을해야

<div id="list"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Downloads</a></li> 
    </ul> 
</div> 

a { 
    text-decoration: none; 
    color: white; 
} 

a:hover { 
    color: black; 
    border: 1px #EEE; 
}

출처

2014-09-11 18:45:56 CodingWithSpike

내 텍스트 장식 코드가 CSS에서 링크로 작동하지 않으므로 인라인 스타일을 사용했습니다.그들은 아직도하지 않습니다. – Knight

. 인라인 스타일을 삭제하십시오. 여기를보세요 :

HTML

<div id="list"> 
    <ul> 
     <li><a href="#" />Home</li> 
     <li><a href="#" />Downloads</li> 
    </ul> 
</div>

CSS

a:hover { 
    color: black; 
    text-decoration : underline; 
} 
a { 
    text-decoration : none; 
}

fiddle

출처

2014-09-11 18:47:19

귀하의 질문에 잘못 몇 가지가 있습니다.

인라인 스타일은보다 구체적이며 CSS a:hover 스타일을 덮어 씁니다. 두 스타일을 블록 또는 별도의 스타일 시트 <style>에 넣으십시오.

a:link { 
    text-decoration: none; 
    color: white; 
} 
a:hover { 
    color: black; 
    border: 1px #EEE; 
}

order of these is important.

앵커 <a href...> 태그가 닫히지 않았습니다.

<li><a href="#" style="text-decoration: none; color: white;">Home</li> 
<!-- should be --> 
<li><a href="#" style="text-decoration: none; color: white;">Home</a></li> 
<!-- removing the style ... --> 
<li><a href="#">Home</a></li>

border:에는 테두리 스타일이 지정되어 있지 않습니다. 그것은 다른 무엇보다도 의도하지 않은 폭포에 대한 안전성입니다.

a:hover { 
    color: black; 
    border: 1px solid #EEE; 
}

는 this fiddle

출처

2014-09-11 19:00:44

A : 호버가 UL 및 LI에서 작동하지 않음

답변

관련 문제