Простой переход фонового изображения HTML5 / CSS3 при наведении мыши - PullRequest
Новая
       9

Простой переход фонового изображения HTML5 / CSS3 при наведении мыши

4 голосов
/ 31 мая 2011

Я пытаюсь понять самый простой фоновый переход, возможный с использованием только HTML5 и CSS3.Выполняя поиск в стеке, я понял, что его легко реализовать с помощью внешних библиотек, таких как jQuery, но для этого проекта я решил не полагаться ни на одну из них.

Разметка 

<nav> 
  <ul> 
    <li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
  </ul> 
</nav>

Стили 

body {
  background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
   background: url('background-hover.png'), no-repeat;
  -webkit-transition: // TODO;
  -moz-transition: // TODO;
  -o-transition: // TODO;
  -ms-transition: // TODO;
  transition: // TODO;
}

Ответы [ 2 ]

7 голосов
/ 01 июня 2011

Как я уже упоминал в своем комментарии, вы не можете изменить свойство background-image, но вы можете получить тот эффект, который вы ищете, если хотите добавить дополнительную разметку и затем изменить прозрачность.Таким образом, у вас будет некоторая разметка, подобная этой: 

<nav>
  <ul>
    <li>
      <img src="no-icon.png">
      <img src="yes-icon.png">
      <a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
    </li>
  </ul>
</nav>

Затем установите переход на изображениях, поместите их в абсолютное положение (чтобы они были похожи на фон) и скройте одно из них по умолчанию (ямы упустили расширения поставщика для ясности): 

nav li img {
    position: absolute;
    transition-duration: 1.5s;
    opacity: 1;
}
nav li img:first-child {
    opacity: 0;
}

Затем поменяйте значения непрозрачности на li:hover: 

nav li:hover img {
    opacity: 0;
}
nav li:hover img:first-child {
    opacity: 1;
}

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

2 голосов
/ 27 июня 2011

Вот пример кода, который я использую для достижения этой цели.Изображения представляют собой спрайты, каждый из которых содержит нормальное состояние и состояние наведения.Хитрость заключается в том, чтобы добавить img к li и a, и использовать непрозрачность, чтобы изменить внешний вид изображения.Затем вы можете использовать переходы css3, чтобы сделать это более плавным. 

<ul id="homenav">
    <li class="h"><a href="#><span>Home</span></a></li>
    <li class="i"><a href="#"><span>Inloggen</span></a></li>
    <li class="v"><a href="#"><span>Voorbeelden</span></a></li>
</ul>

#homenav li.h, #homenav li.h a        {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a        {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a        {background-image: url('img/btn_voorbeelden.jpg');}

#homenav li     {background-position: 0 170px;}
#homenav li a   {background-position: 0 0;}
#homenav li a:hover
        {opacity: 0;
        -webkit-transition: opacity .8s ease-in;
        -moz-transition: opacity .8s ease-in;
        -o-transition: opacity .8s ease-in;
        transition: opacity .8s ease-in;}

#homenav a      {display: block; height: 100%;}
#homenav a span {display: none;}
...