jquery - 画像のマウス ホバー時に親 div に大きなクリック可能な画像を表示する

Question

訪問者がズーム画像の上にマウスを置くとすぐに、クリック可能な大きな画像が表示され、訪問者がマウスをこの大きな画像の外に移動すると、その画像が再び非表示になるプラグインを探しています。http://plugins.jquery.com/および Google/Bing で検索してきましたが、私の要件を満たすものはありません。

私のHTML（melcとjorjordandanの回答に基づいて更新）

<div id="productoverview">

    <div class="product1">
        <div class="prodtitle">
            <span itemprop="name"><asp:Literal ID="Literal11" runat="server" /></span>
        </div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="price">
                <span itemprop="price"><asp:Literal ID="Literal12" runat="server" /> <asp:Literal ID="Literal13" runat="server" /> <asp:Literal ID="Literal14" runat="server" /></span>
            </div>
        </div>
        <div class="description">
            <div class="image">
                <a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
                    <br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
                    </span>
                </a>
            </div>


            <span itemprop="description"><asp:Literal ID="Literal15" runat="server" /></span>
        </div>

        <div class="stock"><asp:Literal ID="ltStockStatus" runat="server" /></div>
        <div class="actionmenu">         
            <img src="/images/zoom.png" class="productzoom pointer" />
            <a class="link viewproduct" href="#" title="">view</a>
            <a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
        </div>
    </div>









    <div class="product1">
        <div class="prodtitle">
            <span itemprop="name"><asp:Literal ID="Literal1" runat="server" /></span>
        </div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="price">
                <span itemprop="price"><asp:Literal ID="Literal2" runat="server" /> <asp:Literal ID="Literal3" runat="server" /> <asp:Literal ID="Literal4" runat="server" /></span>
            </div>
        </div>
        <div class="description">
            <div class="image">
                <a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
                    <br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
                    </span>
                </a>
            </div>


            <span itemprop="description"><asp:Literal ID="Literal5" runat="server" /></span>
        </div>

        <div class="stock"><asp:Literal ID="Literal16" runat="server" /></div>
        <div class="actionmenu">          
            <img src="/images/zoom.png" class="productzoom pointer" />
            <a class="link viewproduct" href="#" title="">view</a>
            <a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
        </div>
    </div>


    <div class="product1">
        <div class="prodtitle">
            <span itemprop="name"><asp:Literal ID="Literal6" runat="server" /></span>
        </div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="price">
                <span itemprop="price"><asp:Literal ID="Literal7" runat="server" /> <asp:Literal ID="Literal8" runat="server" /> <asp:Literal ID="Literal9" runat="server" /></span>
            </div>
        </div>
        <div class="description">
            <div class="image">
                <a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image-->
                    <br />Deckchairs on Blackpool beach <!--caption appears under the popup image-->
                    </span>
                </a>
            </div>


            <span itemprop="description"><asp:Literal ID="Literal10" runat="server" /></span>
        </div>

        <div class="stock"><asp:Literal ID="Literal17" runat="server" /></div>
        <div class="actionmenu">         
            <img src="/images/zoom.png" class="productzoom pointer" />
            <a class="link viewproduct" href="#" title="">view</a>
            <a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a>
        </div>
    </div>

</div>

CSS

/***Style the unordered list with the class 'enlarge'***/
#productoverview {
display:inline-block; /*places the images in a line*/
position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
}

/***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
#productoverview span{
position:absolute; /*see support section for more info on positioning*/
left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}

#productoverview .productzoom:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/ 
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/ 
#productoverview .productzoom:hover .image .span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/ 
top: -50px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/ 

#productoverview .product1:nth-child(2) .productzoom:hover span{
left: 100px; 
}
#productoverview .product1:nth-child(3) .productzoom:hover span{
left: 200px; 
}


/*
#productoverview .productzoom:hover:nth-child(2) span{
left: -100px; 
}
#productoverview .image:hover:nth-child(3) span{
left: -200px; 
}
*/


/***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
#productoverview span img{
padding: 2px; /*size of the frame*/
background: #ccc; /*colour of the frame*/
}
/***Style the <span> containing the framed images and the caption***/
#productoverview span{
/**Style the frame**/
padding: 4px; /*size of the frame*/
background:#eae9d4; /*colour of the frame*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
/*give the corners a curve*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius:6px;
/**Style the caption**/
font-family: 'Droid Sans', sans-serif; /*Droid Sans is available from Google fonts*/
font-size:.9em;
text-align: center;
color: #495a62;
}

これの問題は、ズーム画像が表示したい大きな画像に直接関係していないため、親のズームボタンの親を選択し、.image.span 要素を選択して変更する必要があるように見えることです。その上でスタイル。私はこの投稿をチェックしました: CSS 親セレクターはありますか? . だから今、私はここから続ける方法がわかりません。

Answer 1

css ソリューションはおそらく機能します。このリンクを見つけました：

http://cssdemos.tupence.co.uk/image-popup.htm

少し安っぽく見えますが、やりたいことができるように改善できる可能性があります。コードの最も関連性の高い部分は次のとおりです。

ul.enlarge li:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/ 
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/ 
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/ 
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/ 
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}