0

サムネイルのクリック/ダブルクリックで画像を大きくしたいのですが、その実際の画像にカーソルを合わせるとズームする必要があります...今まではサムネイルにカーソルを合わせると実際の画像が表示されますが、クリックを使用したい(表示する)そして、実際の画像にカーソルを合わせます... jsを使いたくないのですが、css3に役立つプロパティはありませんか?

これが私のコードです

    <section>
<li><a class="thumbnail" href="#">
                                            <img src="graphics/blue1.jpg" alt= "" width="100" height="150" />
                                            <span><img src="graphics/blue1.jpg"/><br /></span></a>
                                            </li>

                                            <li><a class="thumbnail" href="#">
                                            <img src="graphics/blue2.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue2.jpg" /></span></a>
                                            </li>
                                            <li>
                                            <a class="thumbnail" href="#"><img src="graphics/blue3.jpg" alt="" width="100" height="150" />
                                            <span><img src="graphics/blue3.jpg"/><br /></span></a>
                                            </li>


                        </section>

これらのサムネイルのcssは次のとおりです

 section li {
                list-style:none;
                    }

.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#eee;
padding:5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ 
visibility: visible;
top: 10px;
left: 120px; 
}

また、マウスをホバーすると、ホバー画像が前に来るのではなく下がります..

4

3 に答える 3

0

それはCSSでは実際には不可能です。:active 疑似要素を使用して、必要なことのいくつかを可能にすることができますが、それを試してみると、それが機能しない理由がすぐにわかります。

これを行うには、JavaScript または jQuery を使用する必要があります。

于 2013-11-14T07:54:48.767 に答える
-1

この例を試してみてください。

HTML

<img src="graphics/blue1.jpg" id="imgs" onclick="zoom()" alt= "" width="100" height="150" />

JS

function zoom(){
    var NAME = document.getElementById("imgs");

    if (menu == 1) {

        menu = 0;
        $("#imgs").animate(
            {'width': '150px','height':'250px'},150
        );

    } else {
        $("#imgs").animate(
            {'width': '100px','height':'150px'},150
        );
    }
}
于 2013-11-14T07:54:31.923 に答える