나는 span .test가 있고, 마우스가 그 위에 있으면 div .frame을 slideToggle합니다. 마우스가 .frame을 떠나 자마자 .frame slideToggle을 다시 실행합니다. 그것은 완벽하게 작동하지만 .frame 내부에는 다른 div .qwerty가 있으므로 마우스가 .qwerty, .frame slideToggle 위에 표시되면 divs .qwerty가 .frame 내부에 있기 때문에 이유를 알 수 없습니다.
내 코드는 다음과 같습니다.
$(document).on('mouseover', '.test', function() {
var el = $(this);
var elWidth = el.width();
$('body').append('<div class="frame"></div>');
var frame = $('.frame:last');
var posTop = el.offset().top;
var posLeft = el.offset().left;
el.hide();
frame.hide().css({
'left': posLeft,
'top': posTop,
'width':elWidth
});
frame.html('<div class="qwerty">qwerty</div><div class="qwerty">qwerty</div><div class="qwerty">qwerty</div>').slideToggle(150);
}).on('mouseout', '.frame', function() {
var frame = $('.frame:last');
frame.slideToggle(150, function() {
frame.remove();
$('.test').show();
});
});
여기 jsFiddle : http://jsfiddle.net/malamine_kebe/dgJme/
예를 들어 .frame을 작성하면
qwerty<br>qwerty<br>qwerty
완벽하게 작동합니다
mouseover기술적으로 해석 되는 방식 은 마우스가 다른 요소 위에 있으면 더 이상 원래 요소 위에 있지 않습니다. hover대신 사용 하세요 ..
$('.test').hover(function() {
안타깝게도 제대로 작동하려면 자바 스크립트를 수정해야합니다. .hover
대안은 현재있는 요소가 다음의 하위 요소인지 확인하는 것입니다. .frame
편집 : 내 대답은 사실이지만 요소를 요소에 추가 body하고 숨기는 데 문제가 .test있으므로 요소에 더 이상 집중할 수 없습니다.
이것은 내가 할 일입니다 http://jsfiddle.net/dgJme/1/- 기본적으로 요소에 추가 .frame하면 .test내부에 .test몇 명의 자식이 있는지에 관계없이 항상 요소 내부에 마우스를 올려 놓을 수 있습니다..frame
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다