jQuery 和悬停事件有问题答案

【问题标题】：Having trouble with jQuery and the hover eventjQuery 和悬停事件有问题
【发布时间】：2015-03-23 12:43:22
【问题描述】：

我想要做的是当我将鼠标悬停在图像上时，我希望图像变暗，并且我希望文本出现在变暗图像的中心。请查看我的代码，了解我想要发生的事情的一个非常粗略的示例。

到目前为止我所拥有的： -- 我正在使用 jQ 的 opacity 属性来使悬停时的图像变暗 -- 我使用 css sn-p 使文本居中，几个月前我发现它使用 display 属性出现在悬停时

基本上我有所有的组件，它工作正常，直到光标悬停在文本上。如我的小提琴所示，不透明度来回切换多次，直到鼠标离开文本才停止。

tl;dr：当我将鼠标悬停在文本上时，如何防止文本和不透明度来回切换？

CSS

.centered {
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

#news {
    text-align:center;
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    padding:20px 0px;
    background-color:#232323;
}
.newsImage {
    width:100%;
    height:auto;
    position:relative;
}
.newsImageOverlay {
    position:absolute;  
    text-decoration:none;
    color:white;
    background:none;
    z-index:3;
    display:none;
}

jQuery

$(document).ready(
    $("#a1").hover(
        function(){$("#a1").animate({opacity:'0.3'})},
        function(){$("#a1").animate({opacity:'1'});}
    );  
    $("#a1").hover(
        function(){$("#a1Ov").css("display","inline"), "slow"},
        function(){$("#a1Ov").css("display","none"), "slow";}
    );  
});

HTML

<div id="news" class="row">
    <div class="col-sm-4">
        <div id="a1Ov" class="newsImageOverlay centered">Title 1</div>
        <img id="a1" src="project3.png" class="newsImage"/>
    </div>
</div>

欢迎对我的代码如何更高效/更简洁提出任何建议！

【问题讨论】：

几乎完全大约 40 分钟前有人问过同样的问题。让我们看看它在哪里......
大声笑我不知道如何搜索我需要做的事情

标签： jquery html css hover

【解决方案1】：

只需将悬停效果也添加到文本中：

$("#a1, #a1Ov").hover(...

【讨论】：

编辑：它确实阻止了它产生“闪烁”效果，但当文本被鼠标悬停时，它仍然从完全不透明度变为 0.2 不透明度。绝对是一个改进

【解决方案2】：

将这些行添加到您的 css 文件中：

-webkit-transform:(0);
-moz-transform:(0);
-o-transform:(0);
transform:(0);

它应该防止它闪烁

【讨论】：

那么ms-transform 和khtml-transform 呢？我的意思是一旦我们这样做了，我们应该真的污染那个文件。
@arkascha 我认为没有必要
是的，是的。但是话又说回来：您发布的四个标签中有三个是不必要的。

【解决方案3】：

想通了。我最终做的是用包装器 div 覆盖整个事物，将其设置为事件选择器，并使其不可见。如果您遇到和我一样的问题，请给我留言，我会告诉您我使用的方法

【讨论】：