Question

<body>
<div id="content" >
    <img id="Image1" src = "img.png" />

</div>
</body>

我想在另一个图像（Image1）上方悬停时在右上方显示一个近距离图像。怎么能在css中完成，我也在使用jquery。

Answer 1

您需要创建关闭图像。然后，您需要设置#content div的样式并将悬停添加到#content，如下所示：

<div id="content" >
    <img id="Image1" src = "img.png" />
    <img id="close" src="/path/to/close/image/close.png" />
</div>

#content{
    position:relative;
    z-index:0;
}

.close{
    position:absolute;
    right:-10px; top:-10px; /* Will place the close image in the top right edge of the image */
    display:none;
    z-index:1;
}

#content:hover .close{
    display:block;
}

使用JQuery，您可以使用：

$(document).ready(function(){
    $('#content').hover(function(){
        $(this).children('.close').show();
    }, function(){
        $(this).children('.close').hide();
    }
});

Answer 2

给出关闭图像的z-index高于您悬停的图像并将关闭图像置于绝对位置，然后将其置于不透明度为0的正确位置，然后使用jquery为悬停时的不透明度设置动画

Answer 3

您可以在纯CSS中执行此操作，但它很可能无法在IE7或更低版本中运行

<body>
    <div id="content">
        <img id="Image1" src="img.png" />
        <img class="close" src="close.png" />
    </div>
</body>

CSS方法：

#content { position: relative; }
#content .close { 
    display: none; 
    position: absolute;
    top: 0;
    right: 0;
}
#content:hover .close { display: block; }

<强>已更新

要显示关闭按钮的淡入/淡出效果，您需要使用jQuery：

$("#content").hover(function() {
    $(".close", $(this)).stop(true).fadeIn();
},
function() {
    $(".close", $(this)).stop(true).fadeOut();
]);

Answer 4

首先制作一个模型，在右上方显示您的近景图像。当你管理它时，使用jquery在悬停时显示它：

$('#Image1').on('mouseenter', function() { $('#closeImg').show(); });

放置关闭图像可以这样做：

<div class="img-container">
    <div class="close-img"><img src="..." /></div>
    <img src="..." />
</div>

的CSS：

.img-container { position: relative; }
.close-img { position: absolute; top: 0; right: 0; z-index: 99; }

---编辑：如果你想要一些效果，请使用上面的jquery示例，否则使用其他人给出的纯css解决方案（.img-container:hover .close-img { display: block }）

在悬停时显示关闭图像

4 个答案: