Question

我遇到这样的情况：

我的情况有所不同，所有元素都是在带有document.createElement的javascript中创建的，并且它们被附加到互联网上各种网页的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" );
});

} }）;

喜欢这个

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

1 个答案: