HTML/CSS：a：懸停似乎並沒有改變其他div？

我可能會監督一個非常愚蠢的錯誤，但我無法找出爲什麼這不起作用：HTML/CSS：a：懸停似乎並沒有改變其他div？

這是我的HTML，它是一個簡單的菜單，如果我懸停「家」或「播放」的的格「裝飾」改變字體顏色爲紅色......

<div class="menu"> 
<h1> 
    <a href="#">HOME</a> <a href="#">PLAY</a> <a href="#">LOGIN</a> 
    <div id="deco">A</div> 
</h1> 
</div>

CSS：

body { 
height:100%; 
width:100%; 
display: block; 
background-color: #000; 
overflow: hidden; 
margin: 0; 
padding:0; 
} 

.menu { 

margin-top:10%; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
} 

h1 { 
font-family: "Dauphin"; 
color: #FFFFFF; 
} 

a { 
color: #FFF; 
text-decoration: none; 
} 


a:hover #deco{ 
color: red; 
} 

#deco { 
font-family: "Invader"; 
top: 123px; 
color: #FFF; 
width:100%; 
height:100%; 
text-align: center; 
}

來源

2012-12-19 moritzg

你選擇不匹配的元素。對於a:hover #deco工作，DIV都有生存的錨固裏面像這樣：

<a href="#">HOME 
    <div id="deco">A</div> 
</a>

現代瀏覽器支持普通兄弟選擇〜：

a:hover ~ #deco

如果您需要支持的瀏覽器不支持普通兄弟選擇，你可以使用jQuery像這樣實現這一點：

$('a').hover(
    function() { $('#deco').addClass('link-hover'); }, 
    function() { $('#deco').removeClass('link-hover'); });

，並定義CSS：

#deco.link-hover { 
    color: red; 
}

來源

2012-12-19 20:02:51

啊，是的，我完全沒有看到...也許我應該休息一下！無論如何感謝這個夢幻般的答案，這是完全正確的！ – moritzg

@ moe2801快樂:) –

這不起作用，因爲#deco不是a標記的子元素。

CSS聲明a:hover #deco引用ID爲'deco'的任何元素，該元素是處於懸停狀態的錨元素的子元素（例如，包含在其內部）。

對於它的工作，你需要#deco在A標籤裏面，而不是一個兄弟元素。或者您可以保持原樣使用HTML，並用簡單的jQuery代替（使用.css或.addClass更改懸停時的樣式定義）。

來源

2012-12-19 20:03:07 Ennui

HTML/CSS：a：懸停似乎並沒有改變其他div？

回答

相關問題