javascript - 显示隐藏的容器元素 - 悬停仅在我单击容器后有效

Question

我遇到了这样的情况:

http://jsfiddle.net/gz4Z7/2/

与我的情况不同的是，所有元素都是使用 document.createElement 在 javascript 中创建的，并且它们附加到互联网上各种网页的 DOM。

一切都很好，除了一件事:悬停功能在我单击容器之前不起作用。这只发生在某些网页上。

我的问题是:什么会导致需要单击容器元素才能使其子元素的悬停功能起作用？我尝试在容器元素上执行 focus()，但它似乎没有什么不同。

这是 fiddle 代码:

<input id="myInput" type="text"/>
<myContainer id="myContainer">
    <outerThing id="outerThing">
        <myThing id="myThing"></myThing>
    </outerThing>
</myContainer>
<button type="button" onclick="buttonClick()">show container</button>

#myContainer {
    position: absolute;
    top:100px;
    bottom:auto;
    right:auto;
    left:100px;
    width:200px;
    height:200px;
    display: none;
    background-color: red;
}

#outerThing{
    width:50px;
    height:50px;
    margin-top: 10px;
    margin-left: 10px;
    display: block;
    background-color: white;
}

#myThing{
    width:20px;
    height:20px;
    margin-top: 15px;
    margin-left: 15px;
    display: none;
    background-color: blue;
}

function buttonClick() {

    document.getElementById("myInput").focus();

    var cont = document.getElementById("myContainer");
    cont.style.display = "block";

    var outerThing = document.getElementById("outerThing");
    $( outerThing ).hover(
    function()
    {
        $(this).children(":last").css( "display", "inline-block" );
    },
    function()
    {
        $(this).children(":last").css( "display", "none" );
    });

}

Answer 1

$(document).ready(function({
function buttonClick() {

document.getElementById("myInput").focus();

var cont = document.getElementById("myContainer");
cont.style.display = "block";

var outerThing = document.getElementById("outerThing");
$( outerThing ).hover(
function()
{
    $(this).children(":last").css( "display", "inline-block" );
},
function()
{
    $(this).children(":last").css( "display", "none" );
});

}});

像这样