悬停时显示关闭图像答案

【问题标题】：Displaying a close image on hover悬停时显示关闭图像
【发布时间】：2012-02-08 21:56:08
【问题描述】：

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

</div>
</body>

当悬停在另一个图像（Image1）上时，我想在右上角显示一个关闭图像。如何在 css 中做到这一点，我也在使用 jquery。

【问题讨论】：

我的意思是自定义取消图像...
$('img').hover(function(){$(this).prepend('')})。模糊(函数(){$('.close').remove()});

标签： jquery css hover

【解决方案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();
    }
});

【讨论】：

【解决方案2】：

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

【讨论】：

@user1184100 正在运行：（更新）jsfiddle.net/RxvLn/1 你可以用图像替换用于 x 的 div

【解决方案3】：

首先制作一个模型，在右上角显示您的近距离图像。当你管理好这个后，使用 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】：

您可以在纯 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();
]);

【讨论】：

@user1184100 是的，但是如果你想要褪色效果，你必须使用 jquery。
我认为 Image1 是需要近距离图像的图像：/
他想要另一个图像漂浮在这个图像上方，否则这个解决方案肯定是最好的:)
是的，已编辑。 @codewombat 我不确定你在哪里需要褪色效果，因为它没有在 OP 中提到，但你是对的，在这种情况下 jQuery 将是唯一的解决方案。
@Rory McCrossan 很好，他说他正在使用 jquery，所以我自然认为它是为了效果。所以如果他无论如何都要使用jquery，为什么不把它弄好让它看起来不错:)