0

html と css でいくつかのコードを記述して、画像のサムネイルを水平方向にスクロールし、マウスをホバーするとポップアップするようにしました。問題は、水平方向にスクロールできる場合、マウス ホバー時にポップアップ (拡大) 画像が含まれている div 内でのみ表示されることです。ページ上の他のすべての上に表示されるようにしたいと思います。しかし、div のプロパティを overflow-x:scroll にしてスクロール バーを作成したため、div よりも大きい場合、拡大された画像を表示するにはスクロールする必要があります。スクロールするoverflow-xプロパティが表示されない場合、必要に応じて他のすべての上に拡大画像を表示できますが、他のすべてのサムネイルも表示されます。これは、私が行ったことを示すコードスニペットです。

HTML

<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span>   <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span>  <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->

CSS
#example1_car1,#example1_car2,.scroll{
   position:relative;
}

#example1_car1, #example1_car2
{
  width:2400px;
  height:200px;
  z-index:0
}

.scroll
{
   width:800px;
   height:210px;

   overflow-x:scroll;
   z-index:0;
}

.thumb img {
    border:1px solid #000;
    margin:3px;
    float:left;
    zindex:-1;
}
.thumb span {
    position: relative;/*absolute;*/
    display:none;
}
.thumb:hover, .thumb:hover span {
    display:inline;
    top:0; left: 0px;
    /*z-index:1;*/
    z-index:10;
}

どんな助けでも大歓迎です。

4

1 に答える 1