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

Question

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

Внутри тега "a" я вставил тег для текста, который я хотел бы скрыть, когда не завис.В моем 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;

}