更改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中的可见性属性？

回答

相关问题