css - 要素の背景色を緩和 css または jquery

Question

適切なチュートリアルを見つけるのが難しい..実際にどこから始めればよいかわからない:

私が構築しようとしているもの

ナビゲーション メニューにカーソルを合わせると、各リンクの背景が右から左に明るいピンク色に変化していくのがわかります。このようなものをどのようにアニメーション化するのか、私はただ困惑しています. 誰でも私を正しい方向に向けることができますか?

更新：解決しました。この質問を投稿してから10分後にわかりますか？

興味のある方は以下をお読みください: .animate()

Answer 1

JavaScript や jquery を使用せずに、CSS を使用した簡単なソリューションを次に示します。

http://jsfiddle.net/L6hhj/

したがって、基本的にリンク内にスパン要素があり、ホバーすると幅が 100% になります。色/幅をアニメーション化するには、トランジションを追加する必要があります。

HTML:

<ul>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
</ul>

CSS:

ul li {
    display:block;
}

ul li a {
    display:block;
    position:relative;
    height:30px;
    line-height:30px;
    color:#666;
    transition: all ease-in-out 0.5s;
}

ul li a span {
    position:absolute;
    right:0px;
    width:0px;
    background:red;
    height:30px;
    top:0px;
    transition: all ease-in-out 0.5s;
}

ul li a strong {
    position:relative;
}

ul li a:hover {
    color:#fff;
}

ul li a:hover span {
    width:100%;
}