Html 在鼠标悬停时展开答案

【问题标题】：Html expand on mouse overHtml 在鼠标悬停时展开
【发布时间】：2016-10-20 01:08:05
【问题描述】：

我需要在鼠标悬停元素上进行扩展，该元素不会仅将其旁边/下方/上方的文本移出 HTML。

这是我需要这样做的html

<img src="https://media.giphy.com/media/3oEjI4YVeORS9Xqal2/giphy.gif" alt=""style="width:12px;height:18px;">

【问题讨论】：

欢迎来到 SO。请访问help center 并使用tour 了解如何询问以及询问什么。提示：邮政编码和努力
重复？：stackoverflow.com/questions/15757036/…

标签： html mouseover expand

【解决方案1】：

绝对定位周围的内容，然后将img:hover 选择器添加到您的CSS。 [看到这个小提琴] (https://jsfiddle.net/samando27/03azgrvq/) 以使用 div 代替图像的示例，但您只需要更改选择器。下面的代码显示了一个悬停选择器，但查看 Fiddle 进行定位。

img:hover {
    // change these to your expand requirements
    width: 200px;
    height: 200px;
}

【讨论】：

注意它必须能够被复制和粘贴，同时仍然保持扩展属性

【解决方案2】：

添加此代码，它会在鼠标悬停时扩展图像的高度和宽度。

HTML，

<div id="img">
<img src="#" alt="">
</div>

CSS

#img{
width:100px;
height:100px;
transition:0.6s ease;
}
img{
width:100%;
height:100%;
}
#img:hover{
width:150px;
height:150px;
}

【讨论】：