Question

I have a strange issue here. I have a hidden element (display hidden) that I want to show when I mouseover another element. The javscript seems to do the job, but still nothing happens when the element changes from display: hidden; to display: block;

This is my html part:

<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>

Since it is in a smarty tpl file i’ve used literal to the javascript. It looks like so:

<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}

You can see it at http://www.jiblab.dk . If you watch the element with id cart_block you should see that when you mouseover the basket in the top-right corner the style tag changes, but it stays hidden. If I remove style=”display: none” from the above html, it shows my element, so in my head this should work.

Answer 1

the #cart_block element is in another div that has display:none set.

The following block needs .top-header .sf-contener removing from the definition, either that or move the cart_block element out of this element

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