Изменить прозрачность другой вкладки при наведении курсора на текущую вкладку

Question

Изменить прозрачность другой вкладки при наведении курсора на текущую вкладку

0

Я создаю выпадающее меню. Мне нужно, когда я наводил курсор на вкладку, прозрачность других вкладок в меню изменяется, за исключением текущей вкладки, которую я наводил.

Пример: когда я нажимаю на вкладку "Главная", вкладка "Состояние" и элемент списка не изменяются (желтый цвет, непрозрачность = 1), но изменяются другие вкладки ("Учебник, статья, вдохновение") (серый цвет, непрозрачность = 0,5)

<code>http://jsfiddle.net/dennisho/6fX42/2/</code>

ウジアンダオ 21 сен. 2013, в 20:55

Источник

Теги:

javascript

jquery

html

css

tabs

2 ответа

Ещё вопросы

Patrick Evans · Answer 1 · 2013-09-21T17-42-00.000Z

Нет выбора селектора, который будет выбирать всех братьев и сестер, чтобы помочь выбрать другие элементы меню, но вы можете использовать :not селектор

nav > ul:hover li:not(:hover) {
   opacity:0.5;
}

Демо-версия JSFiddle

chopper · Answer 2 · 2013-09-21T17-40-00.000Z

Вы могли бы сделать что - то вроде этого.

nav ul li {
    background-color: yellow;   
}

nav ul li:first-of-type { 
    border-top-left-radius:25px;
    border-bottom-left-radius:25px;
}

nav ul li:last-of-type { 
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
}

nav > ul li:hover{
    opacity:1;
}
nav > ul li:not(:hover){
    opacity:0.5;
}

Но, пожалуйста, включите соответствующий вопрос в свой вопрос, чтобы он был полезен и для других людей.

Я видел ваш образец, но я хочу непрозрачность, цвет текущей вкладки и элемента списка не меняется. Это означает, что текущий цвет является желтым, и непрозрачность элемента списка НЕ изменяется при наведении курсора.
Нет проблем. Я обновил свой ответ выше, чтобы отразить это. Вот прямая ссылка на jsFiddle