mousemove jquery 함수를 사용하는 툴팁 스크립트가 있습니다. 모든 것은 잘 IE에 대한 기대 작동합니다. 여기를 보아라 : http://omarabid.com/deploy/ 직사각형은 "li"요소 다. 마우스를 움직이면 태그가 나타납니다. IE에서는 빈 영역 (오른쪽)으로 마우스를 이동 한 경우에만 태그가 나타납니다. 이미지 위에서 움직이면 아무 일도 일어나지 않아 나를 미치게합니다. 포인터가 이미지의 영역을 입력 할 때, 태그 (! 진실하지 않은)IE mousemove 버그
을 어디 문제가 마우스가 영역을 종료하는 경우처럼 페이드 아웃()과 사라처럼
이 보인다? IE 버그입니까? 당신의 DOM이로드되면실제 문제는 태그 클래스의 background-color:transparent입니다 (대신 배경색을 설정하면 효과가 있음을 알 수 있습니다).
대신 1x1 픽셀 투명 배경 이미지를 사용하면 괜찮을 것 ..
설명
는 background-color: transparent를 제거하고 그 자리에 background: url(/somepath/transparent.gif) top left repeat;
이를 넣어 transparent.gif의 크기는 1px x 1px이어야하며 투명해야합니다. (은 하나의 다운로드 링크입니다. http://www.imgag.com/product/full/ap/3021018/transparent.gif)
당신은 당신의 페이지에이 있습니다 imgtag에서
li.mouseenter(function(kmouse) {
kmouse.preventDefault();
my_tooltip.css({
opacity : 0.8,
display : "none"
}).fadeIn(400);
}).mousemove(function(kmouse){
kmouse.preventDefault();
my_tooltip.css({
left : kmouse.pageX + 15,
top : kmouse.pageY + 15
});
}).mouseleave(function(kmouse) {
kmouse.preventDefault();
my_tooltip.fadeOut(400);
});
/:
<div id="photo1" class="taggedimg">
<img id="atag" src="img/photo1.jpg">
<li style="top: 0px; left: 0px; height: 45px; width: 77px; margin-top: 15px; margin-left: 0px; " class="tag mytag"></li>
<li style="top: 55px; left: 45px; height: 340px; width: 960px; margin-top: 15px; margin-left: 0px; " class="tag mytag"></li>
</div>
... 나에게 weard 보인다
와 기본 동작을 방지하십시오 core.js
비슷한 문제가 발생했습니다. mouseover 및 mouseout 대신 mouseenter 및 mouseleave을 사용해보십시오.
기적적인 답변! :) 나는 그 이유를 결코 알지 못할 것이다. Btw, 나는 당신의 해결책을 이해하지 못했습니다. ( –
@Omar, 설명과 이미지에 대한 링크가 업데이트되었습니다 .. –
고마워요, 록 :) –