jquery - jquery在鼠标悬停时淡入img背景，但不是内容indide

Question

用 jquery 卡住了一点，请检查jsfiddle.net/7HXEF/1/ 带有背景 img 的 DIV，其中背景 imd 应该在鼠标悬停时淡入和淡出。但是内部带有链接的 div 永远不应该淡入或/淡出。

先感谢您！

Answer 1

您的想法是正确的，但是如果您在透明或半透明的 div 中有内容，则该内容将反映其父级的不透明度。

我将内容移到背景之外，并将它们包含在一个新容器中，并将其设置为在鼠标悬停在内容或背景上时触发，现在它似乎可以按照您的意愿工作。

HTML：

<div class="parent">
    <div class="box-side-link" style="background-image:url(http://st.datapic.ru/img/13-02/23/vlSI25yi3zLUuNCpKzBWNAK1G.jpg)"></div>
    <div class="mylink"><a href="#">001</a></div>
</div>

JS：

$(function(){
    // fade out on load
    $('.box-side-link').fadeTo(0,0.5);
});

$('.box-side-link, .mylink').on('mouseenter mouseleave', function(ev) {
    ev=ev.type==='mouseenter' ? $('.box-side-link').stop().fadeTo(500,1) : $('.box-side-link').stop().fadeTo(500,0.5);
});

CSS：

.box-side-link, .parent{
    width: 100%;
    height: 125px;
}
.box-side-link {
    background-position: center center;
    background-size: 100%;
    position: absolute;
}
.parent {
    position: relative;
}
.mylink {
    position: absolute;
}

这是它放在一起的小提琴：http: //jsfiddle.net/2ANut/1/