Question

我正在寻找使用jquery在另一个图像的右上角覆盖图像。

基本上我希望当用户的鼠标悬停在图像上方时，第二张图像出现在右手边的另一张图像上，然后当它们停留在图像上方时消失。我如何用Jquery实现这个目标？

Answer 1

@Senad是对的，你不需要jQuery。但是，如果您遇到更复杂的情况并且正在寻找类似的功能，请尝试：

将它们包含在包含元素中。将包含元素设置为position:relative 将叠加图像设置为position:absolute; top:0; left:0;并根据需要设置高度和宽度的样式...然后使用jQuery处理悬停事件... HTML：

<div>
    <img id="main" src="myimg" />
    <img id="overlay" src="myimg"
    /></div>

CSS：

    div {
     position:relative;   
    }
    #main {   
        width:256px;
     div {
 position:relative;   
}

#main {   
    width:256px;
    height:256px;
}
#overlay {
 position:absolute;
  height:100px;
   width:100px;
   top:0;
   left:0; 
}

代码：

$(document).ready(function() {
    $("#main").mouseenter(function() {
               $("#overlay").show();
    });
    $("#main").mouseleave(function() {
               $("#overlay").hide();
    });
});

请参阅此处的工作示例：http://jsfiddle.net/jsney/10/

Answer 2

你不需要jQuery，你可以使用CSS，例如

<a href="#" class="my-overlay">My Overlay</a>

<强> CSS

a.my-overlay {
background: url('/images/first-image.jpg') no-repeat; 
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }

这是一个更容易解决的问题，并且每个人都可以接受。

Answer 3

让我们假设您的第一张图片被包裹在div中。

1 /添加另一个具有“display：none”样式的div和您选择的类 2 /在悬停时加载div上的img（如果之前没有这样做） 3 / slide切换包含第二张图像的div并瞧！

$('div .firstImage').hover(function(){
    $('.secondImage').slideToggle();
});

当然，您需要为包含第二张图像的div设置正确的定位样式。

Answer 4

这是我按照上面的托马斯代码执行此操作的简单方法。在我的情况下，我想在一个图像上放置一个叠加（基本上是一个带有大加号的灰色框），显示它是可点击的，并将放大灯箱中的缩略图。我需要做很多，所以使用的课程不是ID。

我的图片和叠加图片尺寸相同。 .hide只是隐藏叠加层，直到悬停功能显示它为止。

我没有展示灯箱的东西，所以这个问题更清楚。

请注意，a.hoverTrigger也会包装.overlay img。如果你不这样做，你会得到可怕的闪烁效果。

标记：

<div class="merchImg">
<a href="#" class="hoverTrigger"><img src="_img/_new-store/item.png" /></a>
<a href="#" class="hoverTrigger"><img class="overlay hide" src="_img/_new-store/overlay.png" /></a>
</div>

的CSS：

.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}

jquery的：

$(".hoverTrigger").mouseenter(function() {
    $(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
    $(this).parent().find('a .overlay').hide();
});

Answer 5

我们也可以使用“jquery.ImageOverlay.js”插件来实现这一点。

这是一个例子。

ASPX代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
    <script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        jQuery Image Overlay</h1>
    <fieldset>
        <legend><b>Without any options : </b></legend>
        <ul id="firstGallery" class="image-overlay">
            <li><a href="http://www.yahoo.com">
                <img alt="Palm Tree" src="Images/palmtree.jpg" />
                <div class="caption">
                    <h3>
                        Write a Title Here</h3>
                    <p>
                        Put a Caption Here</p>
                </div>
            </a></li>
            <li><a href="http://www.google.com">
                <img alt="Iguana" src="Images/iguana.jpg" />
                <div class="caption">
                    <h3>
                        Another Title</h3>
                    <p>
                        click for more info</p>
                </div>
            </a></li>
            <li><a href="http://www.google.com">
                <img alt="Ceynote" src="Images/ceynote.jpg" />
                <div class="caption">
                    <h3>
                        Just a Title Here</h3>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
            overlay_speed, overlay_speed_out) : </b></legend>
        <ul id="secondGallery" class="image-overlay">
            <li><a href="http://www.mozilla.com/">
                <img alt="firefox" src="Images/firefox-512-200x200.png" />
                <div class="caption">
                    <h3>
                        Get Firefox</h3>
                </div>
            </a></li>
            <li><a href="http://www.mozilla.com/">
                <img alt="jungle" src="Images/jungle.jpg" />
                <div class="caption">
                    <h3>
                        Tall Overlay</h3>
                    <p>
                        The overlay height is based upon the content it contains</p>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
            metadata plugin</a> : </b></legend>
        <ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
            <li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
                <img alt="bamboo" src="Images/bamboo.jpg" />
                <div class="caption">
                    <h3>
                        Connect to a Lightbox</h3>
                    <p>
                        overlay origin is overridden, not animated</p>
                </div>
            </a></li>
            <li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
                <img alt="Ships" src="Images/josh-ships.jpg" />
                <div class="caption">
                    <h3>
                        &#39;Ships&#39; by Josh Neal</h3>
                    <p>
                        different in/out speeds</p>
                </div>
            </a></li>
            <li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
                href="http://www.mozilla.com/">
                <img alt="cypress" src="Images/cypress.jpg" />
                <div class="caption">
                    <h3>
                        Digg This!</h3>
                    <p>
                        colors, overlay speed overridden, overlay always open</p>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <script type="text/javascript">
        // JavaScript for the Image Overlay galleries.
        $("#firstGallery").ImageOverlay();
        $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
        $("#thirdGallery").ImageOverlay();
    </script>
    </form>
</body>
</html>

=============================================== =============================

CSS：

.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay a
{
    margin: 9px;
    float: left;
    background: #fff;
    border: solid 2px;
    overflow: hidden;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #000;
    width: 100%;
    cursor: pointer;
    /* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
        longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
        To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
    margin: 10px 0 10px 2px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 0 0 5px;
}
.image-overlay p
{
    text-indent: 0;
    margin: 10px;
    font-size: 1em;
}

下载： 访问此链接可以通过多种方式下载.js文件和图像文件以及实施示例。

http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html

Jquery图像叠加？

5 个答案: