Блог

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

В основном у меня есть навигационное меню, состоящее из нескольких изображений с опрокидыванием (обычное состояние «левый верхний», состояние наведения «левый нижний», в настоящее время они настроены на опрокидывание по отдельности с помощью 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} 
  

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

онно,

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

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

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

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

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

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

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

FuzzicalLogic

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