호버의 수직리스트의 위쪽과 아래쪽 테두리 변경

세로 드롭 다운 목록에 대한 효과를 결정했습니다. 기본적으로 각 목록 요소는 1 픽셀 회색 막대로 구분됩니다. 이 효과는 쉽습니다. 하단 경계선 적용 : 단색 1px 검정색.호버의 수직리스트의 위쪽과 아래쪽 테두리 변경

마우스를 올리면 선택한 항목의 위쪽 및 아래쪽 테두리가 흰색이됩니다. 안타깝게도 목록 항목 요소의 위쪽과 아래쪽 테두리를 설정하면 위에있는 목록 항목의 아래쪽 테두리가 변경되지 않고 위쪽 테두리가 검정색으로 유지되고 아래쪽 테두리가 흰색이됩니다.

이 효과를 얻으려면 CSS 만 있습니까?

원하는 효과

가 여기에 표시됩니다 :
menu

출처

2011-10-07 SharpBarb

이는 nonexistent previous-sibling selector의 완벽한 사용하는 것입니다. 불행히도, 전혀 존재하지 않는, 나는 다른 접근 방식을 취할 것입니다. 당신이 위에에있을 경계를 변경할 수있는 경우, 다음 - 형제의 선택은 완벽하게 작동합니다

ul > li:hover, ul > li:hover + li { 
    border-top: 1px solid white; 
}

데모 : http://jsfiddle.net/mattball/ZNR94/

enter image description here

출처

2011-10-07 00:56:23

다음 형제 선택기가 그런 식으로 사용될 수 있는지 전혀 몰랐습니다. 감사! – SharpBarb

-1

가 분명히에 CSS 선택기에서 찾고있다 형제 자매는 다음에 대해서만 다음 예제를 살펴보십시오.

<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
ul { 
    list-style: none; 
    width: 50%; 
    margin: 50px auto; 
} 
li { 
    background: #ccc; 
    border-bottom: 1px solid #000; 
    height; 20px; 
} 
li:hover + li, li:hover { 
    border-bottom: 1px solid #FFF; 
} 
</style> 
<body> 

<ul> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
</ul> 
<p></p> 
</body> 
</html>

그래서 css에서만 어렵습니다

출처

2011-10-07 01:14:14 rkmax

이것은 올바르게 작동하지 않습니다. 잘못된 테두리 쌍이 색을 바꿉니다. http://jsfiddle.net/mattball/hh5x9/ -1 –

호버의 수직리스트의 위쪽과 아래쪽 테두리 변경

답변

관련 문제