CSS не работает на скрытых элементах?

Question

Я не уверен, что здесь происходит, но опрокидывание работает неправильно, и я не могу понять это.

Я использую очень простые и простые css:

open{visibility:hidden;}
open:hover{visibility:visible;}

http://www.ubhape2.com/messages/files/chameleon/ - это страница, над которой я работаю

Пожалуйста, прости ужасный код.Я использую это как простой и быстрый метод.Просто нужно перевернуться на работу, и я в порядке.

Answer 1

Вы можете использовать свойство opacity:

.open{opacity:0;}
.open:hover{opacity:1;}

Answer 2

Проблема в том, что вы не можете навести курсор на скрытый элемент (см. Почему не работает видимость CSS? ).

Решение, опубликованное там, также является хорошей альтернативой для этой проблемы.Есть много других способов сделать это, например, div с изображением на заднем плане, например:

<style> 
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>

Или, если вам нужно использовать изображение, вы можете использовать спрайты изображения (http://www.alistapart.com/articles/sprites)

См. Базовый jsfiddle .

Answer 3

Попробуйте приведенный ниже код, должно работать нормально

a .open{visibility:hidden;} 
a .open:hover{visibility:visible;}


<a class="open" href="">Open</a>