更改css中的可见性属性？ #计数2{ 可见性：隐藏； } #计数1：悬停{ 背景：#123456； //如何在此处更改#count2的可见性属性？ } 我的可见元素 我的闪烁元素

我的问题很清楚，可能有点奇怪。当某人仅使用css悬停在#count1上时，如何将#count2的可见性属性更改为true。

由于您在悬停其中一个元素时修改两个不同的元素，因此可以在单独的规则中使用兄弟组合符，后跟

#count2

选择器来修改该特定元素：

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

---

您必须使用

+

选择器，它选择相邻的同级：

#count2 {
    visibility: hidden;
}

#count1:hover {
    background: #123456;
}

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

这是小提琴：

---

如果您必须针对较旧的浏览器，并且您正在使用jQuery，那么您必须这样做：

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

---

…这里有个问题：

count2必须是count1的子级，才能仅通过css完成此操作

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

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

我的可见元素
我的闪烁元素
#count1:悬停#count2{显示：块；背景：#ffff00；}
#count2{显示：无；}

但是，当使用css2时，您可以使用Joseph Silber的答案中的

+

选择器

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

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

而不是可见性属性

您可以看看jquery

---

以上解决方案可以使用以下JSFIDLE进行抽象：

[id |=“count-1”]{
背景：#123456；
}
[id |=“计数-2”]{
可见性：隐藏；
}
[id |=“count”]：悬停~[id |=“count”]{可见性：可见；}
我的可见元素
我的闪烁元素

我不太确定，所以我将此作为评论发布。我认为如果没有javascript，这是不可能的。当你翻滚

#count2

时，你想让它显示出来，而不是隐藏？你有空使用兄弟选择器吗？不，我想在悬停在#count1上时操纵#count2的可见性，这在css中是可能的，还是我应该使用jquery？@JennyDcosta-正如博尔顿在回答中提到的那样，这在CSS中是可能的，但如果您需要支持IE6，则需要一些Javascript帮助。（JQuery当然是一种选择。）如果你不幸不得不支持IE6，你就必须使用JQuery…@JennyDcosta-你在测试哪个浏览器？这适用于FFX3.5、IE7、IE8和Chrome。。。正如BoltClock所说，如果您需要IE6支持，您将需要一些Javascript帮助。@Jenny Dcosta-当然。您只需更改选择器即可。@Jenny Dcosta:您检查了Joseph发布的链接了吗？如果他的链接有效，但您的代码无效，如果与您发布的内容不同，您可能希望向我们显示您的确切代码。使用

可见性

属性将保留布局的结构<代码>显示：无将导致元素填充空间。提问者可能无法使用

display:none小心-
：nth-of-type（）
查看的是元素类型，而不是属性。将属性选择器与
：nth-of-type（）
组合可能会导致意外结果。ye，将其编辑掉-使用伪选择器有点疯狂。谢谢你的提醒。
 display:none;

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