0

更新：以下に私のコードの例を示します。ライブの例少なくとも私のコンプでは、Safariで最適に動作します。

だから私はクレイジーなホバーシーケンスを作成しようとしています（何かがウェブを念頭に置いて設計されていないため）が、ホバーが発射されるとクレイジーなちらつきが発生します。ホバーはSafariでの作業のようなものですが、FireFoxでは狂ったようにちらつきます。私はまだIEをチェックしていません。以下の私のコードを参照してください：

<html>
    <head>
    </head>
    <style>
        /* Melon */
        #melon_products1_a {
            position:absolute; 
            width: 140px; height: 220px; 
            top:320px; left: 195px; 
        }
        #melon_products1_a:hover + #melon_products1 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products1 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products2_a {
            position:absolute; 
            width: 130px; height: 100px; 
            top:535px; left: 275px;
        }
        #melon_products2_a:hover + #melon_products2 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products2 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products3_a {
            position:absolute; 
            width: 170px; height: 290px; 
            top:250px; left: 330px;
        }
        #melon_products3:hover + #melon_products3 {
            display:block; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products3 {
            display:none; 
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px;
        }
        #melon_products {
            position:absolute; 
            width: 466px; height: 455px; 
            top:220px; left: 195px; 
            background:url(images/melon/melon_products.jpg);
        }
    </style>
    <body>
        <div id="melon_products"></div>
        <div id="melon_products1_a"></div>
        <div id="melon_products1">
            <img src="images/melon/melon_product1.jpg" width="466" height="455" />
        </div>
        <div id="melon_products2_a"></div>
        <div id="melon_products2">
            <img src="images/melon/melon_product2.jpg" width="466" height="455" />
        </div>
        <div id="melon_products3_a"></div>
        <div id="melon_products3">
            <img src="images/melon/melon_product3.jpg" width="466" height="455" />
        </div> 
    </body>
</html>
4

1 に答える 1

0

画像（または実用的な例）なしではかなり困難でしたが、私はあなたが探しているものを理解したと思います。サンプルコードとオンライン例へのリンクを提供しました。

HTML

<div id="melon_products">
 <div class="hover_product" id="melon_products1"></div>
 <div>
  <div>Product 1</div>
 </div>
 <div class="hover_product" id="melon_products2"></div>
 <div>
  <div>Product 2</div>
 </div>
 <div class="hover_product" id="melon_products3"></div>
 <div>
  <div>Product 3</div>
 </div>
 <div class="default_info">Hover to learn more</div>
</div>

CSS

<style type="text/css">
/* Basic hover effect */
.hover_product {position:absolute;background:rgba(255,255,0,.5);}
.hover_product:hover {z-index:2;}
.hover_product + div {display:none;position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background:rgba(255,0,255,1);}
.hover_product:hover + div {display:block;}
.hover_product:hover ~ .default_info {display:none;}

 /* Using this as placeholder for img */
.hover_product > div > div {width:466px;height:455px;display:inline-block;}

/* Product positioning */
#melon_products1 {width: 140px; height: 220px; top:100px; left: 75px; }
#melon_products2 {width: 130px; height: 100px; top:315px; left: 155px; }
#melon_products3 {width: 170px; height: 290px; top:30px; left: 185px; }
.default_info {width:100px;height:150px;position:absolute;right:10px;top:10px;}

/* Wrapper positioning */
#melon_products {position:relative; width: 466px; height: 455px; background:rgba(255,0,0,.5); }
</style>

オンラインの例

于 2012-04-16T21:01:46.410 に答える