イメージとテキストのJqueryホバーに関する問題

Question

このjqueryコードを動作させる際に問題が発生しています。アイデアは、画像が強調表示されるときに不透明度が変化することです。今はsmallartcovクラスタグを使用して不透明度を変更しています。問題は、その上にテキストがあることです。それで、たとえそれが決してしなかったとしても、テキスト領域はマウスがイメージ領域を離れるのと同じです。どうすればこの問題を回避できますか？

http://169.231.6.197/vathom/artist.phpは、テスト対象がホストされている場所です。あなたが@右の絵を見たら、私が何を意味するか見ることができます。次のjQueryと一緒に

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

：

<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> 

任意のアイデアここでは、我々はそれを持っているHTMLはありますか？とても有難い。

Answer 1

テキストにホバーを追加し、不透明度をうまくコントロールできますか？これはあなたが直面している問題を解決します。私は

$('.smallarttxt').hover(function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0'); 
}, function() { 
    $('.smallartcov').css('color', 'white'); 
    $('.smallartcov').css('opacity', '0.5'); 
}); 

Answer 2

あなたがイメージ上のホバーは、あなたは、この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> 

Answer 3

を使用しなければならないとき、画像の不透明度を変更したい場合は、クラスをsmallartcovするz-index: 1;を設定することができますが、その後、テキストも淡色表示されます。

Answer 4

あなたはすべての情報を含む完全な要素artistgにJS .hoverを適用しようとしたことがあり、以下のコードを追加して、それをテストしていますか？おそらくJSを包含divに適用すると、マウスがテキスト上にマウスを置いてホバー状態を「離れる」ことはありません。カーソルはIビームに変わることがありますが、まだホバーの不透明効果が得られている限り、CSSを使用してイメージホバーを中断しないようにカーソルを保持することができます。

Answer 5

ただ、親コンテナにホバー機能を上に移動し、それが自動的に画像とテキストの両方が含まれます：ここでのデモの作業

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

：FYI http://jsfiddle.net/jfriend00/LnLpM/

を、私は以来、色の設定を削除しましたそれは何かをしているように見えなかったし、ホバリングしてもしなくても同じだった。