遇到jQuery和悬停事件的问题

我想要做的是当我将鼠标悬停在图像上时,我希望图像变暗,我希望文本出现在黑暗图像的中心.请查看我的代码,了解我想要发生的一个非常粗略的例子.

到目前为止我所拥有的：
– 我正在使用带有jQ的opacity属性来使悬停时的图像变暗
– 我的文本使用css片段居中,我发现几个月后使用display属性悬停时出现

基本上我有所有的组件,它可以工作,直到光标悬停在文本上.正如我的小提琴所示,不透明度来回切换多次,并且在鼠标离开文本之前不会停止.

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

Here is an example of my problem

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>

欢迎任何有关我的代码如何更高效/更清洁的建议！

解决方法

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

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