마우스 오버 효과가 작동하지 않습니다.

Question

여기에 이상한 점이 있습니다. 숨겨진 요소 (숨겨진 표시)가 있는데 다른 요소를 마우스로 가리키면 표시하려고합니다. javscript는 그 일을하는 것처럼 보이지만 엘리먼트가 display에서 hidden으로 변하면 아무 일도 일어나지 않습니다 : hidden; 표시 : 블록;

이 내 HTML 부분이다 : 그것은 내가 자바 스크립트를 그대로 사용했습니다 멋지 TPL 파일에 있기 때문에

<div id="cart_block" class="block exclusive" style="display: none;"> 
    a bunch more code in here, but I don't suppose I need to display that 
</div> 

. 너무과 같습니다

이

<script type="text/javascript"> 
{literal} 
    document.getElementById('header_user').onmouseover=function(){ 
     document.getElementById('cart_block').style.display='block'; 
    }; 
    document.getElementById('header_user').onmouseout=function(){ 
     document.getElementById('cart_block').style.display='none'; 
    }; 
{/literal} 

당신은 http://www.jiblab.dk에서 볼 수 있습니다. id가 cart_block 인 요소를 보면 오른쪽 상단 모서리에 마우스를 올리면 스타일 태그가 변경되지만 숨겨진 상태로 유지됩니다. 위의 html에서 style = "display : none"을 제거하면 내 요소가 표시되므로 내 머리 속에서 이것이 작동합니다.

Answer 1

#cart_block 요소가 display:none 인 다른 div에 있습니다.

다음 블록이 정의로부터 제거 .top 헤더 .SF-contener가 필요 하나이이 요소 밖으로 cart_block 요소를 이동

.top-header #currencies_block_top, .top-header #header_links, .top-header #search_block_top, .top-header .sf-contener { 
    display: none; 
} 

Answer 2

사용

$(document).ready(function(){ 

document.getElementById('header_user').onmouseover=function(){ 
     document.getElementById('cart_block').style.display='block'; 
    }; 
    document.getElementById('header_user').onmouseout=function(){ 
     document.getElementById('cart_block').style.display='none'; 
    }; 


}); 

document.ready

<div id="header_user" style="width:100px; height:20px; border:1px solid black;"></div> 

<div id="cart_block" class="block exclusive" style="display: none;"> 
    a bunch more code in here, but I don't suppose I need to display that 
</div>