fadeOut not working

Question

나는 웹 디자인에 초보 다. 나는 지금 내 이력서를 만들고있다. 나는이 같은 탐색 DIV 있습니다

<script type="text/javascript> 
    $("#nav img").hide(); 
    $(".button").focus(function() { 
     $(this).next("img").fadeIn("slow"); 
    }).blur(function() { 
    $(this).next("img").fadeOut("slow"); 
    }); 
</script> 

나는 그렇게 누군가가 이미지가 그 아래에 나타납니다 버튼 위에 마우스를 보유 할 때 원하는 :

<div id="nav" class="grid_12"> 
    <div id="Home" class="grid_3"> 
     <div class="button"> 
      <a href="#">Home</a> 
     </div> 
    </div> 

    <div id="Life" class="grid_3"> 
     <div class="button"> 
      <a href="#">Life</a> 
     </div> 
     <img src="img/someimg.jpg"> 
    </div> 

    <div id="Portfolio" class="grid_3"> 
     <div class="button"> 
      <a href="#">Portfolio</a> 
     </div> 
    </div> 

    <div id="Contact" class="grid_3"> 
     <div class="button"> 
      <a href="#">Home</a> 
     </div> 
    </div> 
</div> 

는 다음 나는 탐색을위한 스크립트가 있습니다. 이미지를 제대로 숨기고 있지만 fadeIn이 작동하지 않습니다. 왜 작동하지 않는지 나는 모른다.

Answer 1

.focus은 "focus" 이벤트에 바인딩됩니다 (이벤트 표준이 아닌 내용에 대한 설명과 연결됨). 이것은 텍스트 입력을 탭하거나 클릭 할 때 가장 일반적이지만 다른 요소에도 적용 할 수 있습니다.

mouseenter (또한 mouseover이지만 이전 요소는 자식 요소도 함께 가져 왔을 때 반복적으로 트리거되지 않음) 이벤트는 마우스가 요소를 입력 할 때 발생합니다. 그 반대는 mouseleave (mouseout)입니다. 문서의 ready 이벤트 내부에 스크립트를 넣어 http://api.jquery.com/mouseenter/

Answer 2

시도 :

<script type="text/javascript> 
     $(document).ready(function(){ 
      $("#nav img").hide(); 
      $(".button").focus(function() { 
       $(this).next("img").fadeIn("slow"); 
      }).blur(function() { 
       $(this).next("img").fadeOut("slow"); 
      }); 
     }); 
</script> 

Answer 3

난 당신이 960gs를 사용하고 믿고, 한 가지 내가 나타났습니다은 이것이다 : 당신의 네 grid_3 된 div가 중첩되어 당신의 grid_12. 960g에는 .alpha 및 .omega이라는 두 개의 클래스가 포함되어있어서 모눈이 부모 모눈 안에있을 때 중첩 된 여백을 수정합니다. 첫 번째 자식 div에 .alpha 클래스를 넣어야합니다.이 경우에는 <div id="Contact"> 인 마지막 자식 div의 <div id="#home"> 및 .omega 클래스입니다. 이렇게하면 중첩 된 네 개의 grid_3에있는 여백이 수정됩니다.