クラス'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自体には追加しないでください(通常の方法)。