4

現在、サムネイル画像の1つにカーソルを合わせると、サムネイル画像の上に大きな画像がポップアップするように、HTMLを記述したCSSコードがあります。現在、次の 2 つの問題があります。

1.) サムネイルの上の空白をデフォルトで最初のサムネイルの画像にするにはどうすればよいですか

2.) ホバーした後、別のサムネイルがホバーされない限り写真が消えないようにするにはどうすればよいですか。マウスが空白に入っても、最後にホバーした画像が表示されます。

私のウェブサイトはここにあります。上部に画像表示機能がありますwww.ignitionspeed.comまた、不明な場合は、ここautoblog.com で探しているものの良い例を見つけることができます

これが私がこれに使用しているCSSです

<style type="text/css">

.thumbnail{
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
display: block; 
left: -1000px;
visibility: hidden;
color: red;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 10px;
left: 13px; /*position where enlarged image should offset horizontally */
overflow:hidden;
}

</style>

そして、ここにHTMLがあります

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/lexus-lf-cc-concept.html"><img src="http://i.tinyuploads.com/25rBVR.jpg" width="117px" height="72px" border="0" /><span><img  src="http://i.tinyuploads.com/25rBVR.jpg" /><br /></span></a>

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2009-bmw-m3-review-test-drive.html" ><img src="http://i.tinyuploads.com/IGoDa8.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/IGoDa8.jpg" /><br /></span></a>

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2013-audi-s6-giant-leap-in-performance.html"><img src="http://i.tinyuploads.com/aSwPv9.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/aSwPv9.jpg" /><br /></span></a>

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-lexus-lfa.html"><img src="http://i.tinyuploads.com/Gu1Pey.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/Gu1Pey.jpg" /><br /></span></a>

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/08/acura-nsx-future-is-already-here.html"><img src="http://i.tinyuploads.com/VJo9IP.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/VJo9IP.jpg" /><br /></span></a>

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-jaguar-xkr-s.html"><img src="http://i.tinyuploads.com/REiZ6c.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/REiZ6c.jpg" /><br /></span></a>

本当にありがとう！

4

2 に答える 2

1

Javascript と jQuery に精通している場合はわかりません。ただし、目的の効果を得るには Javascript を使用する必要があります。

これを実現する最も簡単な方法は、jQuery を使用して要素にカーソルを合わせたときに、要素にクラスを追加することです。

$('.thumbnail').mouseover(function() {
    //Removing any active hover class
    $('.thumbnail').removeClass('hover');
    //Add class for the thumbnail that was just hovered
    $(this).addClass('hover');
});

次に、CSS で 2 つのセレクターを変更するだけです。

.thumbnail:hover, .thumbnail.hover {}
.thumbnail:hover span, .thumbnail.hover span {}
于 2012-09-20T18:18:52.793 に答える
1

純粋な CSSの場合はこれを試してください。jQuery を使用する場合は、これを使用してください。

于 2012-09-20T17:57:17.500 に答える