Hover, нажатые и активные состояния не отображаются для 1 кнопки в навигационной панели - PullRequest
Новая
       30

Hover, нажатые и активные состояния не отображаются для 1 кнопки в навигационной панели

0 голосов
/ 03 сентября 2010

У меня есть панель навигации на основе CSS на основе спрайтов Apple, которую вы можете просмотреть здесь:

http://www.marioplanet.com/index.asp

Теперь по какой-то причине я не могу сказать, почему, тамПохоже, что это проблема при наведении, нажатии и активном состоянии кнопки «Домой».По какой-то причине он просто выглядит статичным.

Этот файл http://www.marioplanet.com/css/nav.css

Который имеет следующий код: 

/* GLOBALHEADER */
#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0px 0px; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0px; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0px; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0px; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0px; }

/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0px -37px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0px -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}
#globalheader.catalog #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.about #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.contact #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.media #globalnav li#gn-media a { background-position: -412px -114px !important; }

/* GLOBAL SEARCH */
#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; }
#inputString{background: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; }

Возможно, в этом проблема.

Я играл в DevTools от Google (в основном FireBug), чтобы попытаться изолировать проблему, но мне не повезло.

Селекторы для состояний кнопки «Домой» выглядят точными.

И исходное изображение (http://marioplanet.com/images/globalnav/wanzart.png) имеет действительные состояния, так что это не проблема ..

Ответы [ 2 ]

3 голосов
/ 03 сентября 2010

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

':link' or just 'a' then
':visited' then
':hover' then
':active' then

Простой способ запомнить заказ -> LoVe HAte

Поэтому попробуйте изменить порядок кода CSS для каждой кнопки, а не по состояниям.

Также ваша кнопка CSS слишком специфична для IMO. Если вы используете идентификаторы, предполагая, что они уникальны на странице, какими они и должны быть, вы можете смело нацеливать их напрямую.

2 голосов
/ 03 сентября 2010

Ваше правило здесь под /* ON STATES */ заключается в том, что его вызывает: 

#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}

Поскольку вы находитесь на главном экране, вы #globalheader выглядите так: 

<div id="globalheader" class="home">

так что в отличие от других, #globalheader.home селектор применяется здесь , переопределяя все состояния при наведении.Либо удалите это правило, либо измените его на background-position: 0px -37px, что, вероятно, является тем, для чего предназначен ... этот дом недоступен, пока вы находитесь на домашней странице.

...