1

<ul>Web サイトのサイドバーにいくつかのナビゲーション要素があります。関連するマークアップと CSS スタイルは次のとおりです。

<ul>
    <li><a href="">Blog</a></li>
    <li><a href="">Work</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

#sidebar ul {
    list-style-type: none;
    float: right;
    position: relative;
    right: -10px;
}

#sidebar ul li a {
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

#sidebar ul li a:hover {
    background: url('images/nav-hover.png') no-repeat;
    color: #f0f0f0;
}

ユーザーがナビゲーション要素 (<a>タグ) にカーソルを合わせると、 nav-hover.pngCSS トランジションを使用して背景が右からスライドインするようにします。私はこれを試しましたが、うまくいかないようです：

#sidebar ul li a {
    background: none;
    transition-property: background;
    transition-duration: 1s;
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

#sidebar ul li a:hover {
    background: url('images/nav-hover.png') no-repeat;
    color: #f0f0f0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

どうすればこれを実現できますか?

JSFiddle リンク: http://jsfiddle.net/2EfYa/

4

1 に答える 1

0

background-position：の移行を行う必要があります

http://jsfiddle.net/vQgEd/-おそらくWebkitでのみ機能します

ul li a {
    background: url('http://lorempixel.com/400/200') -100% 0px no-repeat;
    transition: background-position 1s;
    -webkit-transition: background-position 1s;
    display: inline-block;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 10px;
    color: #555555;
}

ul li a:hover {
    background-position:left top;
    color: #f0f0f0;
}​
于 2013-01-02T19:41:07.727 に答える