在鼠标悬停时显示在运行脚本切换后停止工作

Question

我正在尝试将div lolcake显示在另一个panel_toggle1 div中：

• 当鼠标悬停在另一个div panel_toggle1

上时

• 或在panel_toggle1点击

上点击每次点击或关闭

http://jsfiddle.net/Fa7Ct/

悬停工作正常，但当我点击panel_toggle1并返回时，悬停停止工作。那是为什么？

[EDITED]脚本（注意：从此脚本中删除了一些代码以便于阅读 - 是的，问题仍然存在）：

$(document).ready(function () {
    var toggle_height1 = false;
    $("#panel_toggle1").click(function () {

        toggle_height1 = !toggle_height1;

        if (toggle_height1 == true) {
            $('.lolcake').css("display", "block");
        } else {
            $('.lolcake').css("display", "none");
        }
    });
});

工作CSS：

.lolcake
{
    display: none;
}

#panel_toggle1:hover .lolcake
{
    display: block;
}

（如果需要）aspx

<!-- GAME1 PANEL TOGGLE -->
    <div id="panel_toggle1">
        <div class="lolcake" style="position:absolute">text</div><img src="images/image.png" alt=""/>
    </div>

我使用了toggle()和show() hide()等其他功能，但都具有相同的效果。

Answer 1

将此添加到您的css

#panel_toggle1:hover .lolcake
{
display: block !important;
}