在图像鼠标悬停时在父 div 中显示大的可点击图像

Posted 2023-05-08

技术标签:

【中文标题】在图像鼠标悬停时在父 div 中显示大的可点击图像【英文标题】：Display large clickable image in parent div on image mouse hover 【发布时间】：2013-11-13 16:07:59 【问题描述】：

我正在寻找一个插件，只要访问者将鼠标悬停在缩放图像上，就会显示一个更大的可点击图像，并且当访问者将鼠标移到这个更大的图像之外时，它将再次隐藏该图像。我一直在 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"  /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png"  /> <!--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"  /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png"  /> <!--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"  /> <!--thumbnail image-->                
                    <span> <!--span contains the popup image-->
                    <img style="max-width:400px" src="/images/logo_nl.png"  /> <!--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?。所以现在我不确定如何从这里继续。

【问题讨论】：

您要并排放置多个这些图像吗？如果是，请准备好麻烦，因为当您尝试四处移动时，大图像会开始弹出，迫使您四处移动大图像，这样它们就会消失，然后再次相同。同时，中心的图像将无法到达，因为其他弹出图像会覆盖它们等。已经尝试过，但由于可用性限制而感到失望，并解决了点击/点击事件。除非有人提出真正有趣的建议。我还没有考虑到这一点，但这确实是一个很好的观点。也许悬停事件的延迟会更有用？确实延迟确实有帮助，但是当图像在我提到的网格中时，这有点奇怪，而且不那么有用。如果您有一排图像，这不是什么大问题，jorjordandan 提供的解决方案看起来不错。其实是一个网格。所以我决定添加一个缩放图像，当悬停时会显示更大的图像，在这里看到它（还不是网格）：toptrouwen.nl/test.aspx，但是，当悬停缩放图像时，我需要获取父级的子元素并且我有不知道如何在 CSS 中解决这个问题……有什么建议吗？我有点困惑 - 为什么会有缩放按钮？我以为你想放大悬停？听起来可能需要 jQuery 解决方案，但我不知道您要完成什么。听起来应该没那么难，用jQuery获取父元素真的很简单…… 【参考方案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;

【讨论】：

看起来已经不错了！有没有办法延迟大图的显示？请在答案正文中包含相关代码，仅链接的答案往往会被删除。

以上是关于在图像鼠标悬停时在父 div 中显示大的可点击图像的主要内容，如果未能解决你的问题，请参考以下文章

如何在鼠标移动时在图片上方显示链接，同时降低图片的不透明度？

jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？

鼠标悬停时在光标附近显示浮动div，鼠标悬停时隐藏

JavaScript 鼠标悬停时在光标附近显示浮动div，隐藏在mouseout上

动态图像附加到鼠标悬停下拉

悬停时在多个图像之间交叉