Question

我这里有一个奇怪的问题。当我将鼠标悬停在另一个元素上时，我想要显示一个隐藏元素（隐藏显示）。 javscript似乎可以完成这项工作，但是当元素从display：hidden更改时，仍然没有任何反应;显示：阻止;

这是我的HTML部分：

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

由于它是在一个聪明的tpl文件中，我使用了javascript的文字。它看起来像这样：

<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的元素，您会看到当鼠标悬停在右上角的篮子时，样式标记会发生变化，但它会保持隐藏状态。如果我删除style =＆＃34; display：none＆＃34;从上面的html中，它显示了我的元素，所以在我脑海里这应该有效。

Answer 1

#cart_block元素在另一个设置了display:none的div中。

以下块需要.top-header .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

$(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';
    };


});

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

鼠标效果不起作用

2 个答案: