그냥 권장 사항이지만, 일반적으로 파괴하지 말고 숨기는 것이 더 좋으며, 브라우저에서 감사드립니다.
왜? 디스플레이 블록을 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;
}
당신이 더 재사용 및 유지 관리하기 위해서는 자바 스크립트를 사용하려는 주어, 다른 한편으로 https://jsfiddle.net/b5Lvq7yL/
실행을 참조하십시오, 아이디어를 일반 CSS와 결합하여 나중에 소프트웨어의 다른 섹션 (또는 다른 pr)에 사용하려는 것으로 생각하십시오. ojects)
실제로 일반화 할 수 있습니다.
트리거 입력 선택기 ".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를 사용하여) 일부 자바 스크립트
$('.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);
}
);
또는, 당신은 자바 스크립트 vainilla 사용하고자하는 경우 : https://jsfiddle.net/kg22ajm6/
당신을 :
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);
});
이 두 예제가 작동 참조 "fadeIn"을 만들기 위해 opacity : 0 및 opacity : 1을 사용하는 클래스를 만들 수 있습니다. nd "fadeOut". CSS는 일반적으로 원시 Javascript 또는 jQuery, jQuery의 fadeIn 및 fadeOut에 수동으로 애니메이션을 적용하거나 CSS 전환을 브라우저에 내장하는 것보다 더 나은 선택입니다.
확인 불투명도 애니메이션을 사용하여 예 : https://jsfiddle.net/Lwcbn0ae/1/
감사합니다,
너무 많은 코드와 수동 유지 관리가 필요하다고 생각합니다. 어떻게 될까요? –