6

次のコードがあります。

This is a <span id="sentence">sentence</span>.

ユーザーが にカーソルを合わせるとsentence、単語の下に下線がフェードインするようにします。

これはとても単純な問題のように思えますが、最善の方法を見つけることができませんでした。明確にするために、単に使用することはできませんcss:hover。実際の問題はより複雑で、ここに示すよりも多くの制御が必要であるため、JQuery を使用してこれを行う必要があります。事前にご協力いただき、誠にありがとうございます。

4

3 に答える 3

4

これはあなたのニーズに合わないかもしれません。あなたが特に CSS を使いたくないのはわかっています。しかし、念のため...

HTML

This is a <span id="sentence">sentence.</span>​

CSS

span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    border-bottom: 1px solid transparent;
}

span.clicked {
    border-bottom: 1px solid black;
}​

脚本

$('span').click(function(){
  $(this).addClass('clicked');
});

http://jsfiddle.net/as42u/4/

于 2012-12-08T07:24:31.240 に答える
3

jQueryプラグインを使用した Animated Underlines はどうですか?

于 2012-12-08T07:10:08.507 に答える
2

1.Cymenが提案したように、下線付きのjQueryプラグインを使用します

必要な CSSをスタイルシートに追加することを忘れないでください

2.自分でやる

$("#sentence").hover(function(){
    $(this).animate({
        borderBottomWidth: "1px"
    }, 500);
});

フィドルの例。jQuery は text-decoration プロパティをアニメーション化する方法を認識していないため、下の境界線を使用する必要があります。

于 2012-12-08T07:54:02.823 に答える