2012-05-09 2 views
4

Я пытаюсь это сделать, когда вы наводите курсор на элемент списка, текущий текущий всплывает, и все остальные элементы списка исчезают или слегка размываются , Я бы предпочел все css, кто-нибудь знает, как выбрать все остальные li, кроме текущего, выбранного в css?как размыть весь список элементов, кроме (это) a: hover

UPDATE
Я не считаю, что это можно сделать в CSS поэтому я пытаюсь выбрать его в JQuery.

Heres обновленный код с моим не работает JQuery скрипт http://jsfiddle.net/xKEHe/42/

эталонным Hide all but $(this) via :not in jQuery selector

ответ

6

Вы можете написать так:

ul:hover > #blah a{ 
    opacity:0.5; 
    text-shadow: 0 0 2px #CACACA; 
} 
ul > #blah:hover a{ 
    color:#222; 
    opacity:1; 
    text-shadow:none; 
} 

Проверьте это: http://jsfiddle.net/xKEHe/46/

+0

чувак, я полностью тебя люблю! не могли бы вы объяснить, как это работает? –

+1

'opacity: 0.5' делает другие элементы списка 50% прозрачными. Добавленная текстовая тень добавляет эффект «размытия», потому что теперь шрифт не отображается резко. Регулировка цвета тени может даже улучшить этот эффект (например, попробуйте установить его так же, как цвет шрифта). – Paul

+1

Первое: наведите указатель, когда наведите указатель мыши на UL, затем уменьшите непрозрачность всего его дочернего LI и после этого, когда вы: наведите указатель мыши на один LI, тогда непрозрачность этого LI увеличивается. – sandeep