建议隐藏元素而非销毁，这通常更好，浏览器会感谢你。
为什么？当你将display属性从block变为none，或从none变为block时，浏览器必须销毁该元素并重新渲染。而当你只是隐藏它时，浏览器只需定位它即可。
HTML
<a href="#"><div class="hover-img">
Show Image
<span><img src="http://placehold.it/150x150" alt="image" height="100" /> </span>
</div></a>
CSS
a .hover-img {
position:relative;
}
a .hover-img span {
position:absolute; left:-9999px; top:-9999px; z-index:9999;
}
a:hover .hover-img span {
top: 20px;
left:0;
}
请查看其运行效果：
https://jsfiddle.net/b5Lvq7yL/
另一方面，如果您想使用JavaScript以使其更具可重用性和可维护性，我建议您将此想法与一些通用CSS相结合，并将其视为您可能稍后要在软件的其他部分（或其他项目）中使用的内容。
实际上，您可以泛化这个想法。
您可以拥有一个触发选择器".onhover-toggle-child-class"，它从"data-target"中获取其子级并在鼠标进入和离开时切换"data-toggle"中的类。
使用相同的HTML但其他CSS类。
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Show Image
<span class="absolute target hidden on-top">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
<div>
<a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">Show Image
<span class="absolute target2 on-top hidden">
<img src="http://placehold.it/150x150" alt="image" height="100" />
</span>
</a>
</div>
一些非常通用的CSS。
.on-top {
z-index: 99;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.shown {
display: block;
}
.hidden {
display: none;
}
还有一些使用jQuery的JavaScript代码
$('.onhover-toggle-child-class').on(
'mouseenter mouseleave',
function() {
var element = $(this);
var selector = element.data('target');
var child = element.find(selector);
var classes = element.data('toggle');
child.toggleClass(classes);
}
);
或者，如果您想使用原生JavaScript：
var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
var element = event.srcElement || event.target;
var selector = element.getAttribute('data-target');
var classes = element.getAttribute('data-toggle').split(' ');
var childs = element.querySelectorAll(selector);
childs.forEach(function(child) {
classes.forEach(function(toggleClass) {
if (child.classList.contains(toggleClass))
child.classList.remove(toggleClass);
else
child.classList.add(toggleClass);
});
});
}
elements.forEach(function(element) {
element.addEventListener('mouseenter', onhover);
element.addEventListener('mouseleave', onhover);
});
请查看两个示例的工作效果：
https://jsfiddle.net/kg22ajm6/
您可以创建使用 opacity: 0 和 opacity: 1 的类来实现 "fadeIn" 和 "fadeOut"。通常情况下，CSS 比原始的 Javascript 或 jQuery 更好，jQuery 的 fadeIn 和 fadeOut 需要手动执行动画，而 CSS 转换已嵌入浏览器中。
请查看使用透明度动画的示例：
https://jsfiddle.net/Lwcbn0ae/1/
敬礼，
