부모 li 텍스트를 강조 표시하는 방법 : 마우스를 올리시겠습니까?

마우스 오버시에만 기사를 강조 표시하는 방법은 무엇입니까? 현재 내가 아티클에 마우스를 올리면 모든 하위 항목도 강조 표시됩니다. 가능 기사을 강조하는 경우에만부모 li 텍스트를 강조 표시하는 방법 : 마우스를 올리시겠습니까?

여기 http://jsbin.com/ubunu/2

<style> 
    li:hover {background:red} 
li li:hover {background:yellow} 
</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
    <ul> 
<li>Weblog</li> 
<li>Articles 
    <ul> 
    <li>How to Beat the Red Sox</li> 
    <li>Pitching Past the 7th Inning 
     <ul> 
     <li>Part I</li> 
     <li>Part II</li> 
     </ul> 
    </li> 
    <li>Eighty-Five Years Isn't All That Long, Really</li> 
    </ul> 
</li> 
<li>About</li> 
</ul>

출처

2010-05-21 Jitendra Vyas

죄송합니다, Bostonian은 여기에 있습니다. 레드 삭스를 때리는 걸 언급했을 때 날 잃어 버렸어. – Robusto

@Robusto - 무엇을 의미합니까 ??? –

기어 - 솔리드 : 농담입니다. 그러나 Red Sox Nation의 우리는 승리를 거두며 매우 진지하게 패합니다. – Robusto

"기사는"당신은 어떤 <span> 태그 또는 각 단어의 주위에 비슷한 추가 HTML을 편집해야합니다 : 이것은 메뉴처럼 보입니다.이 경우 링크를 사용하게되므로 범위를 사용하는 대신 링크를 타겟팅 할 수 있습니다.

출처

2010-05-21 16:54:33 DisgruntledGoat

예를 들어 당신은 가능성이 다른 브라우저에있는 위치의 일부와 혼란에해야 볼 수 있지만, 당신은 당신의 스타일에 다음을 추가 할 수 있습니다 :

li:hover ul { background: white; } 
li:hover ul li:hover { background: yellow; }

"흰색"을 필요한 16 진수, rgb 또는 색상 값으로 바꿉니다.

<style> 
    li span:hover {background:red} 
    li li span:hover {background:yellow} 
</style> 
</head> 

<body> 
    <p id="hello">Hello World</p> 
    <ul> 
     <li><span>Weblog</span></li> 
     <li><span>Articles</span> 
     <ul> 
     ...etc

편집 : 만 강조하려면 마우스를 단어 위에있을 때

출처

2010-05-21 16:37:28 TheQ

+1 예 좋습니다. 그러나 그 ul에서, li li : 나의 moues가 ul의 아이 항목에있을 때까지 마우스를 올리면 표시됩니다. 하지만이 CSS에서 마지막 가능한 방법이라고 생각합니다. –

내 편집보기, 그게 도움이 되나요? – TheQ

아니요 한 번에 하나의 항목 만 강조 표시하려고합니다. –

부모 li 텍스트를 강조 표시하는 방법 : 마우스를 올리시겠습니까?

답변

관련 문제