更改CSS中的可見性屬性？

<style> 
#count2{ 
visibility:hidden; 
} 
#count1:hover{ 
background:#123456; 
//how do I change the visibility property of #count2 here? 
} 
</style> 
<div id="count1">My visible element</div> 
<div id="count2">My flickering element</div>

我的問題很清楚，可能有點奇怪。如果有人懸停在＃count1上，只使用css，我如何將＃count2的可見性屬性更改爲true。更改CSS中的可見性屬性？

來源

2011-11-11 Jenny Dcosta

我不是很確定，所以我張貼此註釋。我認爲這是不可能的，沒有JavaScript。 –

當你翻轉'＃count2'時，你想讓它顯示，而不是隱藏？ – Charlie

你是否在閒暇時使用兄弟姐妹選擇器？ –

既然你在徘徊其中的一個修改兩個不同的元素，你可以使用一個兄弟組合子隨後#count2選擇在一個單獨的規則修改特定的元素：

#count2 { 
    visibility: hidden; 
} 

#count1:hover { 
    background: #123456; 
} 

#count1:hover + #count2 { 
    visibility: visible; 
}

來源

2011-11-11 13:55:01 BoltClock

如果你不幸得不得不支持IE6，你將不得不使用jQuery ... – BoltClock

@JennyDcosta - 你正在測試哪個瀏覽器？這適用於FFX 3.5，IE7，IE8和Chrome ...正如BoltClock所說，如果您需要IE6支持，您需要一些Javascript幫助。 – DashK

m在谷歌瀏覽器 –

你必須使用+選擇器，它選擇相鄰的兄弟姐妹：

#count2 { 
    visibility:hidden; 
} 
#count1:hover { 
    background:#123456; 
} 
#count1:hover + #count2 { 
    visibility: visible; 
}

這裏的小提琴：http://jsfiddle.net/Yyr64/

如果你有目標舊的瀏覽器，而你使用jQuery，這是你必須做的：

var $count2 = $('#count2'); 

$('#count1').hover(function(){ 
    $count2.css('visibility', 'visible'); 
}, function(){ 
    $count2.css('visibility', 'hidden'); 
});

...這是這樣做的小提琴：http://jsfiddle.net/Yyr64/1/

來源

2011-11-11 13:55:30

做這個工作與count1作爲類和count2作爲id？ –

@Jenny Dcosta - 當然。你只需要改變選擇器。 –

不適用於鉻！ –

COUNT2會需要成爲count1的孩子才能通過css來完成。

<div id="count1"> 
    My visible element 
    <div id="count2">My flickering element</div> 
</div> 

#count1:hover #count2{ display: block; background: #ffff00; } 
#count2{ display: none; }

當使用CSS2不過，你可以使用+選擇在約瑟夫·西爾伯的回答

來源

2011-11-11 13:56:26

你的「css2」應該是「css1」，你的「css3」應該是「css2」...... – BoltClock

編輯答案。歡呼聲BoltClock：D –

-1

使用

display:none;

，而不是visibility屬性。

你可以看看jQuery的 http://api.jquery.com/show/

來源

2011-11-11 13:56:29 student

爲什麼不'可見性'？使用'visibility'屬性的 – BoltClock

將保留佈局的結構。 'display：none;'只要元素被設置爲none，將導致元素填充空格。對於使用'display：none'的提問者可能不可行;' – Larry

以上解決方案可與以下的jsfiddle抽象：http://jsfiddle.net/mousepotatoweb/PVHzK/2/

<style> 
[id|="count-1"]{ 
background:#123456; 
} 

[id|="count-2"]{ 
visibility:hidden; 

} 

[id|="count"]:hover ~ [id|="count"] { visibility: visible;} 
</style> 

<div id="count-1">My visible element</div> 
<div id="count-2">My flickering element</div>

來源

2011-11-11 14:04:44 Larry

小心 - '：nth-of-type（）'查看元素類型，而不是屬性。將屬性選擇符與'：nth-of-type（）'組合可能會導致意外的結果。 – BoltClock

你們把它編輯出來了 - 對僞選擇器有點瘋狂。感謝您的支持。 – Larry

更改CSS中的可見性屬性？

回答

相關問題