span:элементы наведения не работают для моего поля

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

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

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

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

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

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


css tabs hover rollover
person Mike    schedule 13.02.2012    source источник
comment
Для этого вам придется использовать JavaScript.   -  person Blender    schedule 13.02.2012
comment
вы просите javascript? Если вы, возможно, захотите рассмотреть возможность использования фреймворка, который поможет вам... jquery ui и т. д.   -  person nodrog    schedule 13.02.2012
comment
Вы показали правильную скрипку? Я не вижу никаких тегов opacty, не говоря уже о тегах <span>..   -  person Rob W    schedule 13.02.2012
comment
Я обновил скрипку... Моя цель - сделать это только с помощью CSS и HTML. Возможно ли это? Или span:hover — это то, что вы делаете в Javascript?   -  person Mike    schedule 13.02.2012
comment
В некоторых браузерах это возможно только с помощью HTML/CSS. Я не уверен насчет всех версий IE, но FF/Chrome должны нормально работать с моим ответом ниже. Запуск Linux, поэтому тестирование в IE - это боль. ;)   -  person kitti    schedule 13.02.2012
comment
У вас есть непрозрачность: 1 для диапазона и диапазона: наведите курсор   -  person Giannis    schedule 13.02.2012

Ответы (2)


arrow_upward
2
arrow_downward

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

a:hover span {
    opacity: 1;
}

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

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

person kitti    schedule 13.02.2012

arrow_upward
0
arrow_downward

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

a:hover span {

    opacity: 1;

}
person Giannis    schedule 13.02.2012