CSS: атрибут hover ведет себя непоследовательно - PullRequest
Новая
       17

CSS: атрибут hover ведет себя непоследовательно

1 голос
/ 31 июля 2010

Привет,

Я делаю сайт с: парящими изображениями в качестве фона ссылок. Но, как ни странно, работает только первая ссылка. Другие не действуют как ссылки и не реагируют на событие: hover.

Вот уместно HTML: 

 <a href="/" id="home-link" class="icon">Home</a>
 <a href="skills/" id="skills-link" class="icon">What I Can Do</a>
 <a href="portfolio/" id="portfolio-link" class="icon">My Portfolio</a>
 <a href="connect/" id="connect-link" class="icon">Connect With Me</a>

Первый действительно идет в правильное место. Остальные три не дают браузеру никаких отзывов о том, что они являются ссылками, и ничего не делают при нажатии. Вот мой немецкий CSS: 

 #home-link {
   background: url(icons-sprite.png) no-repeat 0 0;
   top: 30px;
   left: 30px;
 }

 #home-link:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

 #skills-link {  
   background: url(icons-sprite.png) no-repeat -128px 0;
   top: 178px;
   left: 286px;
 }

 #skills-link:hover { background: url(icons-sprite.png) no-repeat -128px -128px; }

Стили для двух других ссылок идентичны.

Первый отлично показывает состояние: hover. Остальные остаются инертными.

Я делаю вывод, что с моим HTML что-то не так, но я не вижу в них ничего плохого. Это происходит в FF и Chrome.

Есть идеи?

Ответы [ 3 ]

1 голос
/ 31 июля 2010

Исправлено!

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

Поскольку он был над ссылками, они не стреляли.Поэтому я переместил его ниже ссылок, и все работает просто денди.

1 голос
/ 31 июля 2010

Вы ориентируетесь только на одну ссылку, используя идентификатор: 

#home-link:hover

Используйте этот CSS вместо: 

#container a:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

Где #container - идентификатор элемента, содержащего ваши ссылки.

0 голосов
/ 31 июля 2010 
#home-link {...}
#home-link:hover {...}

используя это, вы обращаетесь только к элементу с идентификатором 'home-link', который был вашей первой ссылкой. Поскольку другие ссылки имеют разные идентификаторы, они не используют ваш блок CSS ...

попробуйте использовать определение класса вместо id: 

.icon {
 background: url(icons-sprite.png) no-repeat 0 0;
 top: 30px;
 left: 30px;
}

.icon:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

Поскольку все ваши ссылки имеют class = "icon", у вас не будет проблем ...

...