我正在寻找一个插件，只要访问者将鼠标悬停在缩放图像上，就会显示更大的可点击图像，当访问者将鼠标移到外面时，这个较大的图像会再次隐藏该图像。 我一直在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元素改变那种风格。 我查了这篇文章：Is there a CSS parent selector?。 所以现在我不确定如何从这里继续。
答案 0 :(得分：2)
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;
}