我可以用：hover僞類來做到這一點嗎？

我熟悉：hover psuedo類，並將它用於元素以及我們都習慣的典型鏈接設置。然而，我試圖做的是創造一種情況，將鼠標懸停在一個元素上會改變另一個元素的屬性。例如，如果我將鼠標懸停在.block1上，＃block2將變爲可見。我會認爲.css看起來像這樣...我可以用：hover僞類來做到這一點嗎？

.block1:hover div#block2 
{ 
    visibility:visible; 
}

但這讓我無處可去。思考？我知道我可以使用javascript來實現這一點（使元素出現和消失），但我很想找到一個純CSS的解決方案。

來源

2011-06-15 DWLynch

你有沒有發現你的解決方案，沒有？如果不是，我仍然願意提供幫助。 – BDawg 2011-07-09 06:06:37

如果第二個元素是第一個元素的後代，那麼它將工作。

jsFiddle。

來源

2011-06-15 05:28:36 alex

您想要更改的元素必須是您正在徘徊的元素的子元素。

範例CSS：

#navButton div.text { 
    display:none; 
} 

#navButton:hover div.text { 
    display:block; 
}

這將使文本的div顯示，如果你將鼠標懸停在使用id = 「navButton」的元素。

否則，使用jQuery的解決方案：

CSS：

#navButton div.text { 
    display:none; 
} 

.hover { 
    display:block; 
}

的Javascript：

$("#navButton").hover(
    function() { 
     $("#navButton div.text").addClass("hover"); 
    }, 
    function() { 
     $("#navButton div.text").removeClass("hover"); 
    } 
);

編輯：

如果懸停元素位於要修改的元素之前，那麼也可以在CSS中爲兄弟元素執行此操作。像這樣：

#navButton + div.text { 
    display:none; 
} 

#navButton:hover + div.text { 
    display:block; 
}

#navButton ~ div.text { 
    display:none; 
} 

#navButton:hover ~ div.text { 
    display:block; 
}

來源

2011-06-15 05:33:12 BDawg

我可以用：hover僞類來做到這一點嗎？

回答

相關問題