1

我这里有一个奇怪的问题。我有一个隐藏元素（显示隐藏），当我将鼠标悬停在另一个元素上时我想显示它。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 的元素，您应该会看到，当您将鼠标悬停在右上角的篮子上时，样式标签会发生变化，但它会保持隐藏状态。如果我从上面的 html 中删除 style="display: none" ，它会显示我的元素，所以在我看来这应该可以工作。

4

2 回答 2

2

#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;
}
于 2012-11-21T09:21:49.520 回答
0

使用 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>
于 2012-11-21T09:36:22.407 回答