как добиться подобного эффекта наведения на этом сайте - PullRequest
Новая
       12

как добиться подобного эффекта наведения на этом сайте

1 голос
/ 16 декабря 2009

как добиться эффекта при наведении на верхнюю часть ссылки (HOME, ABOUT, JOBS) который вы можете увидеть в http://www.webdesignerwall.com/, может кто-нибудь дать мне подсказку? или любой?

Ответы [ 9 ]

3 голосов
/ 16 декабря 2009

Многие люди здесь слишком быстры, чтобы выкинуть языки сценариев. Тск, тск. Это достижимо с помощью CSS. Я бы даже сказал, что нет необходимости в дополнительной наценке. Можно использовать фоновое изображение в состоянии: hover. Простой.

2 голосов
/ 16 декабря 2009

Каждая ссылка (#nav li a) содержит текст элемента навигации и дополнительный диапазон, который по умолчанию имеет значение «display: none». У диапазона также есть набор других стилей, связанных с его положением и фоновым изображением (которое является текстом, который появляется).

При #nav li a: при наведении диапазон становится display: block, который делает его видимым в определенной позиции. Сценарии не нужны.

HTML 

<ul id="nav">
  <li><a href="index.html">Home <span></span></a></li>
  <li><a href="about.html">About <span></span></a></li>
  <li><a href="jobs.html">Jobs <span></span></a></li>
</ul>

CSS: 

#nav li a span{display:none}
#nav li a:hover span{display:block}

Конечно, это полностью урезанная версия, вам нужно будет добавить собственное позиционирование и другие стили в зависимости от ситуации.

1 голос
/ 16 декабря 2009

Это достигается путем использования пустого <span>.

По умолчанию он находится вне экрана и перемещается в поле зрения

Вот так: 

<ul>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
    <li><a href="#">Link<span>&nbsp;</span></a></li>
</ul>

И CSS: 

ul li a {
    display: relative;
    }

ul li a span {  
    position: absolute;
    top: -50px; /* or however much above the a you need it to be */
    left: -1000em;
    }

ul li a:hover span {
    left: 0;
    }
1 голос
/ 16 декабря 2009

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

<div class="hoverImages">
  <img src="blank.jpg" style="display:none;" />
</div>

<ul>
  <li class="home">Home</li>
  <li class="about">About</li>
  <li class="contact">Contact</li>
</ul>

- JQuery 

$("li.home").hover(
  function () {
    $(".hoverImages img").attr("src", "hoverHome.jpg").show();
  },
  function () {
    $(".hoverImages img").hide();
  }
);
0 голосов
/ 16 декабря 2009

Чистое решение CSS объясняется на сайте Эрика Мейера: Pure CSS Popups 2 .

0 голосов
/ 16 декабря 2009

В данном конкретном случае разработчик поместил тег span внутри элементов li, которые составляют меню. Этот промежуток имеет (в первую очередь) эти свойства:

  • высота: 33px;
  • верх: -26px;
  • влево: изменяется для правильного расположения пролетов
  • позиция: абсолютная;

После этого, просто немного JavaScript, чтобы пролёт появлялся / исчезал.

0 голосов
/ 16 декабря 2009

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

0 голосов
/ 16 декабря 2009

Используя jQuery, вы просто делаете что-то вроде 

$(#MenuId).hover(function() { // show hidden image}, 
    function() { // hide hidden image});
0 голосов
/ 16 декабря 2009

Вероятно, это скрипт в ссылках Home, About и Jobs, который делает плавающий тег div видимым при наведении мыши и невидимым при наведении мыши.

Вот простой пример кода, обеспечивающий похожий эффект: 

<html>
  <body>
    <a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
    <div style="display:none" id="my-hidden-div">and I appear.</div>
  </body>
</html>
...