1

質問 #1 : テキスト ボックスにテキストを表示するだけでなく、テキストをフェード インおよびフェード アウトするにはどうすればよいですか

質問 #2 [解決済み] : ボタン アイコンとテキストの間にスペースを入れたいのですが、うまくいきません。ボタンの例:

テキストが重なっている画像

更新: padding-left: 30px;スペースの問題を修正しました。

html:

<input type="button" id="sv" value="          Score Viewer"></input>
<input type="button" id="pv" value="          Print Viewer"></input>
<input type="button" id="ev" value="          Exam Viewer"></input>
<br>
<input type=text id="tvinfo" value="" readonly size=50 />

JQuery:

$(function() {
    $('#sv').hover(
        function () {
            $('#tvinfo').val("View scores of exams already taken");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
    $('#pv').hover(
        function () {
            $('#tvinfo').val("View who printed the certificate");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
    $('#ev').hover(
        function () {
            $('#tvinfo').val("View who already took the exam");
        }, 
        function () {
            $('#tvinfo').val("");
        }
    );
});

CSS:

#sv {
    background: #ccc url(view.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}
#pv {
    background: #ccc url(print.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}
#ev {
    background: #ccc url(taken.png) no-repeat top left;
    height: 53px;
    width: 186;
    cursor: pointer;
}
4

3 に答える 3

1

この DEMO http://jsfiddle.net/yeyene/tfRed/をチェックしてみてください。

偽の入力ボックスを作成し、実際の入力ボックスの不透明度をフェードイン/フェードアウトし、ホバーイン/アウト.stop()を高速化するために使用しました。

$(function() {
    $('#sv').hover(
        function () {
            $('#tvinfo').stop().fadeTo(500,1).val("View scores of exams already taken");
        }, 
        function () {
            $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");});
        }
    );
    $('#pv').hover(
        function () {
            $('#tvinfo').stop().fadeTo(500,1).val("View who printed the certificate");
        }, 
        function () {
            $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");});
        }
    );
    $('#ev').hover(
        function () {
            $('#tvinfo').stop().fadeTo(500,1).val("View who already took the exam");
        }, 
        function () {
            $('#tvinfo').stop().fadeTo(200,0, function() {$(this).val("");});
        }
    );
});
于 2013-07-05T03:28:59.913 に答える