>  기사  >  웹 프론트엔드  >  JavaScript의 CSS에서 표시:없음과 제거의 차이점은 무엇입니까?

JavaScript의 CSS에서 표시:없음과 제거의 차이점은 무엇입니까?

黄舟
黄舟원래의
2017-07-24 09:48:002786검색

마우스 호버 표시를 작성하고 사라지는 js를 그대로 둡니다.
마우스 호버가 있을 때 js에서 데이터를 가져오고 .append(pop)를 사용하여 dom에 붙여넣고 .Micro_video_imgne 태그 내에 표시합니다.
리모트를 사용하면 마우스를 움직일 때 팝업이 사라지게 됩니다.
하지만 제거 기능을 사용할 때 문제가 있습니다. 추가된 스타일(.pop)이 마우스 호버 라벨(.Micro_video_img) 내에 있기 때문에 팝 라벨이 깜박입니다.
CSS(display: none)를 사용하면 효과를 완벽하게 얻을 수 있습니다. 그런데 문제는 페이지의 태그가 추가된다는 것입니다.

$("body").on("mouseover",".Micro_video_img",function(){
    var pop="<div class=&#39;pop&#39;><a href=&#39;#&#39; class=&#39;Micro_video_a font_e&#39;>橡皮雕刻章子-周杰伦</a><div class=&#39;taolun&#39;>"+
    "<s class=&#39;taolun_icon icons&#39;></s>53</div><div class=&#39;like&#39;><s class=&#39;like_icon icons&#39;></s>230</div></div>";

        $(this).append(pop);

});

$("body").on("mouseout",".Micro_video_img",function(){
    $(this).children("div.pop").remove();
});

깜박임의 원인: 마우스가 팝으로 이동할 때 마우스오버 이벤트가 발생합니다. 실제로는 두 이벤트를 번갈아 실행하여 발생하는 현상입니다. 렌더링을 계속하려면 페이지를 클릭하세요.
해결책: 요소와 해당 하위 요소를 전달하면 mouseover 이벤트가 트리거됩니다. mouseover/mouseout 이벤트를 mouseenter/mouseleave로 바꾸세요.

mouseenter

display: none으로 변경해 보세요. 그냥 숨겨진다는 뜻인가요? 위치도 비뚤어지게 이동한거 노드 제거 아닌가요?

display:none->이 사람을 집에 숨기고 아무도 보러 나오지 마세요
$('#dom').remove()->이 사람을 지구에서 완전히 사라지게 하세요
visibility:hidden - >많은 사람들이 빈임금을 받으며 화장실을 점유하고 있습니다
opacity:0->황제의 새 옷을 입고 있습니다

위 내용은 JavaScript의 CSS에서 표시:없음과 제거의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.