ちょっとお勧めしますが、通常は破壊するのではなく隠す方がいいです、ブラウザはあなたに感謝します。
なぜですか？表示ブロックをnoneに設定するか、またはnoneにすると、ブラウザは要素を破棄して再度レンダリングする必要があります。あなたがそれを隠すだけで、ブラウザはそれを配置するだけです。
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;
}
は、それはあなたがそれをより再利用可能とメンテナンス性にするために、JavaScriptを使用したいことを考えると、一方https://jsfiddle.net/b5Lvq7yL/
を実行している参照してください。このアイデアをいくつかの一般的なCSSと組み合わせて、後でそのソフトウェアの他のセクション（または他のpr
実際、あなたは一般化することができます。
トリガセレクタ ".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をvainilla使用したい場合：
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);
//console.log(selector, classes, childs);
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/
あなたは"fadeIn"をaにするためにopacity：0とopacity：1を使用するクラスを作成できますnd "fadeOut" CSSは通常、生のJavascriptやjQuery、jQueryのfadeInやfadeOutを手動でアニメーション化したり、CSSトランジションをブラウザに組み込んだりするのに適しています。
チェック不透明度のアニメーションを使用した例：https://jsfiddle.net/Lwcbn0ae/1/
よろしく、
私は、あまりにも多くのコードと手作業のメンテナンスが必要と考えています。それはどうですか？ –