Меню при наведении курсора на анимацию: отображение блика, отображаемого над ссылкой меню

Question

У меня проблема, которая кажется неразрешимой из-за ограничений HTML.

Вот снимок, который может объяснить вам все:

#

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

Но, подумав об этом, я обнаружил, что это не сработает, потому что пункт меню потеряет: hover stat, как только прозрачная часть окажется под мышкой.

Если бы это было с actionscript3, это было бы легко сделать, установив свойство .mouseEnabled в моей прозрачной части, чтобы оно не учитывалось мышью.

Знаете ли вы, возможно ли что-то подобное с html?Есть ли у вас другие решения / пути для достижения успеха, что я хотел сделать?

Спасибо за вашу помощь!

Answer 1

Ключом к достижению такого рода эффектов является использование свойства CSS z-index . Например, если ваша структура меню выглядит следующим образом:

<div id="menu">
  <ul>
    <li>
      <a href="#">Master/PHD Education</a>
      <span>Introduction, Master &amp; Doctorans</span>
    </li>
  </ul>
  <div id="transparent_overlap"></div>
</div>

Хитрость в том, чтобы работать с 3 слоями, первый - это фон меню (коричневый и белый), который можно назначить для div, затем второй слой - прозрачное перекрытие, а первый - это LI, который имеет ссылку. С css это будет выглядеть так:

#menu{
   background:..
}

#transparent_overlap{
   background:..transparent effect..
}

li{
   position:relative;
   z-index:3;
}

Теперь вам нужно только переместить прозрачное перекрытие на текущий параметр наведения с помощью javascript.