Получение: hover для настройки более одного класса / идентификатора - PullRequest
Новая
       30

Получение: hover для настройки более одного класса / идентификатора

0 голосов
/ 20 октября 2011

Я изо всех сил пытался заставить что-то работать, и я уже искал кучу мест, любая помощь очень ценится.

По сути, у меня есть меню навигации, состоящее из нескольких сменяемых изображений (нормальное состояние «левый верх», состояние при наведении «левый нижний», в настоящее время они настроены на опрокидывание по отдельности через css - они выглядят так: 

<ul id="menu">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="archives">Archives</a></li>
<li><a href="#" class="contact">Contact</a></li>
<li><a href="#" class="about">About</a></li>
</ul>

#menu {
list-style: none;
padding: 0;
margin: 0 auto;
height: 24.6em;
width: 79em;
position: relative;
}

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}


#menu a:hover {
background-position: left bottom;}


#menu .home {
width: 520px;
height: 124px;
background: url(images/Home Menu.png) no-repeat;
left: 0px;
top: 122px;
}

#menu .archives {
width: 263px;
height: 57px;
background: url(images/Archives Menu.png) no-repeat;
left: 0px;
top: 189px;
}

and so on for the rest of the links.

Теперь я пытаюсь добиться того, чтобы все они перевернулись, когда я наведу любой из них. Так сказать, я завис над "архивами"; следующее перевернет "архивы, контакты, о"

Я уже попробовал следующее, и оно не сработало (предложение opacity сделало именно то, что я хотел, но по какой-то причине это не работает для "background-position"): 

#menu:hover .archives {background-position: left bottom; opacity: 0.5}
#menu:hover .contact {background-position: left bottom; opacity: 0.5}
#menu:hover .about {background-position: left bottom; opacity: 0.5}

Как бы я пошел к достижению этого? заранее спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 20 октября 2011

ohnno,

Вы были на правильном пути, но он не работает из-за требований специфичности. Попробуйте пойти по этому маршруту: 

#menu:hover a { background-position: left bottom; opacity:0.5; }

Если он все еще не работает, попробуйте: 

#menu:hover li a { background-position: left bottom; opacity:0.5; }

Наконец, вы также можете применить! Важное к правилу, чтобы применить правило. ! важный - это специальный флаг для CSS, который говорит браузеру «Это переопределяет все, что вы думаете» (вроде). Вот пример: 

#menu:hover li a { background-position: left bottom !important; opacity:0.5; }

Для получения дополнительной информации о специфике, ознакомьтесь с этой статьей на W3C. Короче говоря, специфичность определяет, какие стили используются в какое время. Стиль применяемого элемента определяется, как правило, правилом, стилем с наибольшей специфичностью для каждого из возможных стилей.

FuzzicalLogic

0 голосов
/ 20 октября 2011

left-bottom может изменяться недостаточно, поэтому вы не заметите изменения. попробуйте правильно?

...