Question

<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的visibility属性更改为true。

Answer 1

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

#count2 {
    visibility: hidden;
}

#count1:hover {
    background: #123456;
}

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

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

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

Answer 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的回答

Answer 5

使用

 display:none;

而不是可见性属性。

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

在css中更改可见性属性？

5 个答案: