Question

我的问题是mouseover和mouseout。因为有些数据是在div #mydiv中动态生成的，而div也是类on-hover也是动态生成的...所以我必须将jQuery(document).on({ mouseenter:用于mouseover的直播事件， mouseout ..一切顺利......但显然鼠标移动就像地狱一样......

我的HTML代码：

    <a href="" >
    <div id="mydiv" class="image">
        <img src="http://core2.staticworld.net/images/article/2013/08/diy-app-dev-100050594-large.jpg" /> </div>
    <div  class="on-hover"> this is my hover text </div>
</a>

我的js代码：

jQuery(document).on({
    mouseenter: function(){
        $("#mydiv").next(".on-hover").show();
    },
    mouseleave: function(){
        $(".on-hover").hide();
    }
}, "#mydiv");

和我的css：

.image{
    width:200px;
    height:200px;
}
.on-hover{
    font-size:2em;
    color: rgb(255, 255, 255);
    display: block;
    background-color: rgb(222, 31, 57);
    position: absolute;
    width:100%;
    height:100%;
}

我在jsFeild也有同样的问题。

Answer 1

为什么不删除JS并简单地在CSS中执行此操作，从而清楚地保持关注点的分离（JS用于功能，CSS用于表示）：

Demo Fiddle

.image {
    width:200px;
    height:200px;
}
.on-hover {
    font-size:2em;
    color: rgb(255, 255, 255);
    display: none;
    background-color: rgb(222, 31, 57);
    position: absolute;
    width:100%;
    height:100%;
}

a:hover .on-hover {
    display:block;
}

Answer 2

将on-hover div移至mydiv。的 DEMO

<a href=""> <div id="mydiv" class="image"> <img src="http://core2.staticworld.net/images/article/2013/08/diy-app-dev-100050594-large.jpg" /> <div class="on-hover"> this is my hover text </div> </div> </a>

JS，

jQuery(document).on({ mouseenter: function () { $(".on-hover").show(); }, mouseleave: function () { $(".on-hover").hide(); } }, "#mydiv");

<强>更新

Demo根据评论

Answer 3

FIDDLE:

只有css才能实现您的目标：

CSS：

.a-tag {
    display: block;
}
.on-hover {
    font-size: 2em;
    color: rgb(255, 255, 255);
    display: none;
    background-color: rgb(222, 31, 57);
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
}
.a-tag:hover .on-hover {
    display: block;
}

jQuery鼠标悬停和mousleave导致闪烁

3 个答案:

Demo Fiddle