2

ユーザーがリンクの上にカーソルを置いたときに、背景画像の不透明度（0から100％）の遷移を使用しようとしています。私はこのようなsmthを持っています：

<div class="menu">
 <ul class="sf-menu">
  <li class="page_item page-item-2">
    <a href="http://filip-hostel.pl/?page_id=2">o nas</a></li>
  <li class="page_item page-item-6">
    <a href="http://filip-hostel.pl/?page_id=6">oferta</a></li>
  <li class="page_item page-item-8">
    <a href="http://filip-hostel.pl/?page_id=8">galeria</a></li>
  <li class="page_item page-item-10 current_page_item">
   <a href="http://filip-hostel.pl/?page_id=10">cennik</a></li>
  <li class="page_item page-item-12">
   <a href="http://filip-hostel.pl/?page_id=12">kontakt</a></li>
 </ul>
</div>

そしてCSS：

    .sf-menu a, .sf-menu a:visited{
border:none;
color:#ffffff;
font-family:Arial;
font-size:16px;
line-height:72px;
width:65px;
text-align:center;
padding:0px;
margin:0;
background:none;
-webkit-transition: 1.0s ease-in;
    -moz-transition: .01s ease-in;
    -o-transition: 1.0s ease-in;
    -ms-transition: 1.0s ease-in;
    transition: 1.0s ease-in;

}

.sf-menu li:hover{
background:none;
}

.sf-menu a:hover{
background: url(img/menu_hover.png) center center no-repeat;

}

.current_page_item a{
background: url(img/current_page.png) center center no-repeat;
}

current_page_itemでは機能しますが、他では正しく機能しません。あなたはそれがどのように見えるかをここで見ることができます 誰かが何か考えを持っていますか？前もって感謝します！

4

2 に答える 2

1

通常、CSS3 のトランジション アニメーションは、既存の CSS プロパティ (background-image や background-position など) でのみ機能します。ニーズを満たす background-opacity フィールドはありません。また、プロパティが変更されると遷移が発生します。

background-image を変更すると、必要な遷移が暗示されます (一部のブラウザーでは、これが初期バージョンの firefox のようにフェードイン アウト遷移として表示されません)。この場合、 a の 2 つの異なる状態は.current_page_item aとbackground-image: url(img/current_page.png);でありbackground-image: url(img/menu_hover.png);、他のプロパティはのように、同じbackground-positionです。しかし の.sf-menu a場合、2 つの状態はまったく異なります。 からbackground-iamge: none; background-position: left top;までbackground-image: url(img/menu_hover.png); background-position: center center;存在しない画像と新しい画像の間でアニメーションを表示する方法がないため、フェードイン アウトの遷移はありません。

このアニメーションが本当に必要な場合は、 を含むクリップ ボックスを使用してみてください (うまくLIいくでしょう) 。半径の境界線と.AAbackground-color

于 2012-05-21T15:10:09.507 に答える