Изменение свойства видимости в CSS?

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>

Мой вопрос ясен и может быть немного странным. Как мне изменить свойство видимости # count2 на true, когда кто-то наводит курсор на # count1, используя только css.

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

Используйте

 display:none;

вместо свойства видимости.

Вы можете взглянуть на jquery http://api.jquery.com/show/

Answer 5

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 вы можете использовать селектор +, как в ответе Джозефа Силбера