4

とのみを使用して可能な最も単純な背景遷移を理解しようとしています。stackoverflow を検索すると、次のような外部ライブラリを使用して簡単に実装できることがわかりましたが、このプロジェクトでは、それらのいずれにも依存しないことにしました。 HTML5CSS3jQuery

マークアップ

<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;
}
4

2 に答える 2

7

コメントで述べたように、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>

次に、画像にトランジションを設定し、それらを絶対位置に設定し (背景のようにします)、デフォルトでそのうちの 1 つを非表示にします (わかりやすくするために、ベンダー拡張機能は省略しています)。

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;
}

これが完全に機能する例です。余分なマークアップを追加する必要があるため、理想的なソリューションではありませんが、うまくいきます。

于 2011-05-31T22:47:12.903 に答える
2

これを実現するために使用するコードの例を次に示します。画像は、それぞれ通常状態とホバー状態を含むスプライトです。コツは、li と a の両方に img を追加し、不透明度を使用して画像の外観を変更することです。次に、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;}
于 2011-06-27T11:59:20.780 に答える