懸停問題。 HTML和CSS

問題：這個想法是改變懸停時其內容顏色的div。除文本和圖像（精靈）顏色在不同點處變化外，懸停在'地址'div上方的文字以及'addressicon'div上方的圖片。有誰知道我怎樣才能讓這兩個改變懸停在'地址'格。懸停問題。 HTML和CSS

HTML：

<section id="gallery"> 
    <div class="container" style="padding-top:40px;"> 

     <div class="address"><div class="title"><span>Address</span></div><br> 
      <div class="addressicon"></div> 
      <p><br>Address1<br> 
      Address2<br> 
      Address3<br> 
      Area<br> 
      City<br> 
      PostCode 
      </p> 
     </div> 

     <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div> 
     <div style="width:33%;height:400px;display:inline-block;background-color:#000000"></div> 

    </div> 
    </section>

CSS：

.address { 
width:33%; 
height:400px; 
display:inline-block; 
background-color:#CCC; 
color:#bcb7af;} 

.address:hover {color:#000000;} 

.address span { 
color:#bcb7af; 
align:center; 
font-size:24px; 
width:100%;} 

.address:hover span { 
color:#000000;} 

.title {text-align:center;} 

.addressicon { 
background: url(../images/address.png) bottom; 
width:202px; 
height:130px; 
margin: 0px auto;} 

.addressicon:hover { 
background-position: 0 0;}

非常感謝

問題就迎刃而解了新的CSS：

.address > .addressicon { 
    background: url(../images/address.png) bottom;} 

.address:hover > .addressicon, { 
    background-position: 0 0;}

來源

2013-03-01 Paul

如果您希望地址元素的祖先在鼠標懸停在地址元素上時更改其樣式（我認爲這是您要求的內容）然後，您不能使用純CSS css + html做到這一點，遺憾的是，需要研究一個JavaScript/jQuery解決方案 – Sean 2013-03-01 10:01:51

.address:hover > .addressicon { 
    color: SOMETHING; 
}

永不離開div空。放入一個 ，以防止它的愚蠢行爲。

來源

2013-03-01 10:07:50 Sheric

我不知道留下'div'空造成了奇怪的行爲？它會導致什麼樣的奇怪行爲？ – Sean 2013-03-01 10:10:08

有時，瀏覽器不理解結束標記以及進入空白div後的所有內容。 – Sheric 2013-03-01 10:13:58

好的，谷歌搜索後，我想我明白你的意思，總是很好學習新的東西！ – Sean 2013-03-01 10:26:30

懸停問題。 HTML和CSS

回答

相關問題