0

クラス'entry'の親div内に2つのh3要素があります

<div class="entry">
  <h3 class="productsHover">
    <a><img src="image.png" /></a>
  </h3>
  <h3>
    <a>Drillrigs</a>
  </h3>
</div>

これで、画像にカーソルを合わせると、CSSで定義された遷移効果が得られます。

h3.productsHover img{
    position: relative;
    margin-right: 10px !important;
    left: 0px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
h3.productsHover img:hover{
    left: 6px;
}

h3.productsHoverホバー効果が適用されるのと同じ親要素()にそれらを追加したくありません。それら(画像とテキスト)は別々のh3タグに残しておく必要があります

質問:実際にh3テキスト要素にカーソルを合わせたときに、画像にホバー効果を呼び出すにはどうすればよいですか?

.entry他の多くの画像やh3タグも含まれているため、親要素()全体にホバー効果を適用したくないわけではありません。

また、クラスはJSを介してのみ追加する必要があり、html自体には追加しないでください(通常の方法)。

4

3 に答える 3

1

@Vimal Stan:この答えは次のように改善する必要があります:

$(".entry img").prev().addClass("hoverClass"); // of fire hover for that element
// same with this one .entry:hover img

http://api.jquery.com/prev/

 .prev( [selector ] )Returns: jQuery

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
于 2013-03-18T06:46:37.830 に答える
1

ハンドラーをh3のホバー(jQueryサポート)イベントにバインドします。このイベントはテキストを含み、ハンドラーはmouseenterにクラスを追加し、mouseoutにクラスを削除します。効果を実行するためにimgを持つh3のcssクラスを許可します。

$( 'div.entry h3:last-child a' ).hover(
    function(e){ $(this).parent().prev().addClass('productsHover') },

    function(e){ $(this).parent().prev().removeClass('productsHover') }
);
于 2013-03-18T07:00:04.357 に答える
0

あなたはこのようにそれを行うことができます:

 .entry img
 .entry:hover img

これにより、divの上にホバーした場所に関係なく、ホバー効果を表示できるようになります。

于 2013-03-18T06:42:07.223 に答える