タイトルが紛らわしい場合はご容赦ください。基本的に、ホバーすると、2番目のdivをアクティブにしてdisplay:block
、基になるdivの上に表示するdivがあります。カーソルを 2 番目の div に移動するときに発生するちらつきを除いて、うまく機能します。
もう 1 つの小さな問題は、2 番目の div をクリックすると一瞬消えることです。
例については、この jsFiddle を確認してください: http://jsfiddle.net/uB82S/1/
タイトルが紛らわしい場合はご容赦ください。基本的に、ホバーすると、2番目のdivをアクティブにしてdisplay:block
、基になるdivの上に表示するdivがあります。カーソルを 2 番目の div に移動するときに発生するちらつきを除いて、うまく機能します。
もう 1 つの小さな問題は、2 番目の div をクリックすると一瞬消えることです。
例については、この jsFiddle を確認してください: http://jsfiddle.net/uB82S/1/
**
**
HTML を次のように変更します。
<div class="product-main">
<div id="img-container" class="img-container">
<div class="feature-product-img" id="feature-product-img" style="display: block;">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
<img class="product-img" src="http://www.spinnakerextreme.com/media/catalog/product/p/r/product_2_bg.png" alt="2012 TT Isle of Man Official Review Blu Ray and DVD" />
</a>
****move this inside the feature-product div****
<div class="main-img" id="main-img">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
<img src="http://www.spinnakerextreme.com/media/catalog/product/cache/1/small_image/9df78eab33525d08d6e5fb8d27136e95/t/t/tt_man_review_1.png" height="184" id="main-image-img"/>
</a>
</div>
************
</div>
</div>
<div class="product-description">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
2012 TT Isle of Man Official Review Blu Ray and DVD
</a>
</div>
css を次のように変更します。
.feature-product-img:hover > .main-img{
display:block;
}
.feature-product-img .main-img:active {
display:block;
}
正しいセレクターを使用してください。http://jsfiddle.net/uB82S/7/を参照してください
/*
.feature-product-img:hover + .main-img {
display:block;
}
.feature-product-img + .main-img:active {
display:block;
}
* replace with below ..
*/
#img-container:hover div#main-img {
cursor: pointer;
display: block;
}
代わりに製品コンテナーにホバーを配置してみてください。このようにして、メイン画像を表示するためのより安定した方法を提供します
.product-main {
display: inline-block;
}
.product-main:hover .main-img{
display:block;
}
.main-img:active {
display:block;
}