更改css中的可见性属性？答案

【问题标题】：Changing visibility property in css?更改css中的可见性属性？
【发布时间】：2011-12-27 01:12:42
【问题描述】：

<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。

【问题讨论】：

我不太确定，所以我将其发布为评论。我认为如果没有 javascript，这是不可能的。
当您翻转#count2 时，您希望它显示，而不是隐藏？
您是否有空闲使用兄弟选择器？
不，我想在悬停在 #count1 上时操纵 #count2 的可见性，这在 css 中是否可行，或者我应该使用 jquery？
@JennyDcosta - 正如 BoltClock 在他的回答中提到的，在 CSS 中是可能的，但如果您需要支持 IE6，则需要一些 Javascript 帮助。（当然，JQuery 是一种选择。）

标签： css visibility

【解决方案1】：

由于您在悬停其中一个时修改了两个不同的元素，因此您可以在单独的规则中使用同级组合器后跟 #count2 选择器来修改该特定元素：

#count2 {
    visibility: hidden;
}

#count1:hover {
    background: #123456;
}

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

【讨论】：

如果你不幸不得不支持 IE6，你将不得不使用 jQuery...
@JennyDcosta - 你在测试哪个浏览器？这适用于 FFX 3.5、IE7、IE8 和 Chrome……正如 BoltClock 所说，如果您需要 IE6 支持，则需要一些 Javascript 帮助。

【解决方案2】：

您必须使用 + 选择器，它选择相邻的兄弟姐妹：

#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/

【讨论】：

@Jenny Dcosta - 当然。您只需要更改选择器。
@Jenny Dcosta：你检查过 Joseph 发布的链接吗？如果他的链接有效，但您的代码无效，您可能需要向我们展示您的确切代码（如果它与您发布的不同）。

【解决方案3】：

上面的解决方案可以用下面的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>

【讨论】：

小心 - :nth-of-type() 查看元素类型，而不是属性。将属性选择器与:nth-of-type() 结合使用可能会导致意外结果。
是的，编辑了它 - 使用伪选择器有点疯狂。感谢您的提醒。

【解决方案4】：

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 时，您可以使用 + 选择器，如 Joseph Silber 的回答中所示

【讨论】：

【解决方案5】：

使用

 display:none;

而不是可见性属性。

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

【讨论】：

使用visibility 属性将保留布局的结构。 display: none; 将导致元素填充空间，只要元素设置为无。提问者可能无法使用display: none;