2

このjqueryコードを機能させるのに問題があります。アイデアは、画像がハイライトされたときに不透明度が変わるはずだということです。現在、不透明度を変更するためにsmallartcovクラスタグを使用しています。問題は、その上にテキストがあることです。そのため、テキストは、マウスが画像領域を離れたとは見なされません。どうすればこれを回避できますか？

http://169.231.6.197/vathom/artist.phpは、テスト対象がホストされている場所です。@右端の写真を見ると、私が何を意味しているのかがわかります。これが私たちが持っているhtmlです：

<div class="artistg">
    <div class="smallartcov"></div><span class="smallarttxt">702</span>
    <img class="smallartpic" src="images/df.jpg" />
</div>

次のjqueryと一緒に：

<script type="text/javascript">
$('.smallartcov').hover(function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0');
}, function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0.5');
});
</script>

何か案は？とても有難い。

4

5 に答える 5

1

テキストにホバーを追加して、不透明度を適切に制御できますか。これにより、直面している問題が修正されます。以下のコードを追加してテストしました。

$('.smallarttxt').hover(function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0');
}, function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0.5');
});
于 2012-04-24T05:13:11.443 に答える
0

画像にカーソルを合わせたときに画像の不透明度を変更する場合は、このjqueryコードを使用する必要があります

<script type="text/javascript">
$('.smallartpic').hover(function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0');
}, function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0.5');
});
</script>
于 2012-04-24T05:08:41.077 に答える
0

smallartcovクラスに設定できz-index: 1;ますが、テキストも淡色表示になります。

于 2012-04-24T05:12:02.850 に答える
0

すべての情報を含む.hover完全な要素にJSを適用してみましたか？artistgおそらく、JSを含むdivに適用すると、マウスがテキストの上にホバーすると、ホバー状態を「離れる」ことがなくなります。カーソルは引き続きIビームに変わる可能性がありますが、ホバー不透明度効果が得られる限り、CSSを使用して、画像のホバーを妨げないようにカーソルを任意の位置に保つことができます。

于 2012-04-24T05:17:19.480 に答える
0

ホバー機能を親コンテナに移動するだけで、画像とテキストの両方が自動的に含まれます。

$('.artistg').hover(function() {
        $(this).find('.smallartcov').css('opacity', 0);
    }, function() {
        $(this).find('.smallartcov').css('opacity', .5);
    }
);

ここでの作業デモ：http：//jsfiddle.net/jfriend00/LnLpM/

参考までに、色の設定は何もしていないようで、ホバリングしてもしなくても同じだったので削除しました。

于 2012-04-24T05:24:52.050 に答える