Question

坚持jquery，请检查jsfiddle.net/7HXEF/1/ DIV与背景img，当鼠标悬停时，背景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/

jquery fadein图像背景鼠标悬停，但内容不满意

1 个答案: