jquery - マウスオーバー時のjqueryのフェードインimgの背景ですが、コンテンツは表示されません

Question

jquery で少し立ち往生していjsfiddle.net/7HXEF/1/ ます。マウスオーバー時に背景 imd がフェードインおよびフェードアウトする必要がある、背景 img で DIV を親切に確認してください。ただし、リンクを含む内部の 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/