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

Question

我有这样的情况：

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

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

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

我的问题是：什么会导致需要单击容器元素才能使其子元素的悬停功能起作用？我试过在容器元素上做一个 focus() ，但它似乎没有什么区别。

这是小提琴代码：

<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" );
});

} });

像这样