3

ホバー オーバー エフェクトに jQuery を使用しています。現在の状態から拡張する予定ですが、問題があります。問題は、その div にカーソルを合わせるとテキストが表示されるまで、一部のテキストを非表示にしたいということです。その後、別の div に移動すると、再び非表示になりますか?

これは私がこれまでに持っているものです。http://jsfiddle.net/UDFw7/

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

JavaScript

$('.divname').hover(function() {
$(this).animate({
    height: '40px'
}, 300);
},function() {
$(this).animate({
    height: '20px'
}, 300);
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> Hidden text until hover over</div>
<div class='divname'>Text Here</div>
4

4 に答える 4

6

overflow: hidden;に追加.divname

于 2013-03-15T11:20:08.567 に答える
0

CSS

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

.divname span {
    display: hidden;
 }

JavaScript

$('.divname').hover(function() {
    $(this).animate({
        height: '40px'
    }, 300);
    $('span', this).css("display", "block");
},function() {
    $(this).animate({
        height: '20px'
    }, 300);
    $('span', this).css("display", "none");
});

HTML

<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> <span> Hidden text until hover over<spa></div>
<div class='divname'>Text Here</div>

デモ: http://jsfiddle.net/UDFw7/14/

于 2013-03-15T11:20:44.940 に答える
0

必要なのは、非表示のテキスト用の新しい CSS クラスです。次に例を示します。

.divname p.hidden {
    display:none;
}

次に、そのクラスにカーソルを合わせると、そのテキストを表示するため、javascript でこれが必要になります。

 $(this).children().show();

これにより、非表示のテキストを表示するために表示プロパティが変更されます。

私は簡単なフィドルを作りました。完璧ではありませんが、スタートです: http://jsfiddle.net/UDFw7/3/

ホバーオフしたときに要素を「再非表示」にするために、いくつか追加する必要があります。

于 2013-03-15T11:23:44.640 に答える
0

以下のようにCSSを変更します

.divname {
height: 20px;
width: 300px;
border: 1px solid black;
overflow-y: hidden;

}

于 2013-03-15T11:24:25.763 に答える