mouseenter 롤오버 효과는 두 번째 입력 후에 만 ​​적용됩니다.

Question

거의 확실하게이 특정 문제에 대한 유사한 게시물을 찾으려고 했으므로 JQuery에 대해 조금 더 경험이 많은 사람이 내 문제를 밝힐 수 있습니다. 저는 현재 포트폴리오 사이트, 즉 많은 이미지 작업을하고 있습니다. 사이트에 표시된 미리보기 이미지 중 하나 위에 마우스를 올려 놓으면 Jquery 롤오버 효과를 만들고 싶습니다.

효과 자체가 달성되었지만 일종의 버그가 있습니다. 페이지를 새로 고침하거나 페이지를 새로 볼 때마다 내 마우스가 Jquery 효과를 트리거해야하는 이미지 컨테이너 요소에 들어갈 때마다 처음부터 그렇게하지는 않지만 페이지를 새로 고치지 않고 다시 시도 할 때 , 그 효과가 있습니다. 나중에 내 jQuery 코드 "fadeIn하자 솔루션 : 당신은 내가"없음 표시 "내"롤오버 효과 "를 해결했습니다 볼 수 있습니다 그래서

<section class="main"> 
    <div class="wrapper"> 
     <article class="ImageContainer"> 
      <a href="#"> 
       <img class="back" src="Images/Image1.jpg" alt="Image1"/> 
       <span class="over" style="display: none;"> 
        <h2>Title</h2> 
        <p>Watch Project</p> 
       </span> 
      </a> 
     </article> 
    </div> 
</section> 

: 여기

는 기본 HTML 마크 업입니다 "을 사용하여 마우스 입력 효과를 볼 수 있습니다.

다음은 span class = "over"에 대한 CSS로, 표시 할 필요는 없지만 그냥 넣을 수 있습니다. 브라우저에서 볼 때에서만 문제가 발생하는 것 같습니다 내 JQuery와

$(document).ready(function(){  
    $(".ImageContainer").mouseenter(function(){ 
     $(this).children('a').children('span').fadeIn(200); 
    }); 
    $(".ImageContainer").mouseleave(function(){ 
     $(this).children('a').children('span').fadeOut(200); 
    }); 
}); 

에 대한

지금

.over { 
    width: 300px; 
    height: 300px; 
    background-image:url(Images/over.png); 
    position: absolute; 
    top: 0px; 
    left 0px; 
} 

그리고 이 jsfiddle은 문제없이 작동하는 것 같다. 나는 왜 그럴까? 내 다른 문서에 대한 모든 링크도 작동하며 jquery 및 jquery UI가 링크되어 있습니다. 내 문제

는

http://jsfiddle.net/LRdR9/

해결책 : 내 .over 클래스는 없었다 "디스플레이 : 블록;" 브라우저로 보지 못했습니다. 두 번째 마우스 센터에 자동으로 놓습니다. 내가 또 다른 문제가 있다고 생각하면서 속임수를 썼다.

Answer 1

모든 것이 jsFiddle에서 작동하는 것 같습니다.

jsFiddle에서 코드 onload을 실행하고 있다는 점에 유의하십시오. 파일 자체에서 코드를 수행하고 있는지 확인하십시오. jQuery를 머리가 아닌 몸 안에 넣어야합니다. 또한 여러 브라우저에서 테스트하고 있는지 확인하십시오.

p.s. 코드를 다음과 같이 단축 할 수 있습니다.

예 jsFiddle.