span: элементы hover не работают для моей коробки

Question

Моя цель - создать поле с двумя вкладками, чтобы определенный текст на вкладке отображался, когда пользователь наводит курсор на вкладку. Для вкладок на моем ящике я сделал список внутри div.

Внутри тега "а" я вставил тег для текста, который я хотел бы скрыть, когда не завис. В моем CSS я установил span{opacity: 0} и span:hover{opacity:1}. Текст скрыт, но когда я нахожусь над ним, ничего не происходит.

Проверьте скрипку:

http://jsfiddle.net/lamike/74sBm/6/

Какие-либо предложения?

Спасибо за любой отзыв

Answer 1

Во-первых, ваша скрипка не так - у вас есть opacity: 1 в обоих span а также span:hover, Измените это, и оно работает нормально - X появляется, но только когда вы наводите курсор на span содержащий X. Я предполагаю, что вы хотите, чтобы он появлялся каждый раз, когда вкладка перемещается, поэтому попробуйте это:

a:hover span {
    opacity: 1;
}

Это работает для меня в FF.

РЕДАКТИРОВАТЬ: О, и вы действительно должны использовать класс на промежутке, а не применять стиль для всех промежутков.

Answer 2

Если вы хотите, чтобы элемент span изменялся при наведении на вкладку, то вам нужно следующее:

a:hover span {

    opacity: 1;

}