jquery fadein img background on mouse over，but not content indide

卡住了jquery，请检查jsfiddle.net/7HXEF/1/ DIV与背景img，其中背景imd应淡入和淡出时鼠标悬停。但div里面的链接，绝不应该淡入淡出。jquery fadein img background on mouse over，but not content indide

预先感谢您！

来源

2013-02-23 JU1CY

您有正确的想法，但是如果您的内容是透明或半透明的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/

来源

2013-02-23 11:01:09 sjdaws

我只是开始与jQuery的:)谢谢！作品gr8，而不是如果我dublicate DIV相同的风格，它淡出所有的DIV http://jsfiddle.net/2ANut/4/ – JU1CY 2013-02-23 11:14:51

你需要唯一标识你想要淡出哪个div。 jquery的基础是用'box-side-link'类来淡化div，你的两个背景都有这个类。你可以保留这一点，但通过选择悬停项目的父项并找到正确的“box-side-link”来使用与鼠标最接近的'box-side-link'。http://jsfiddle.net/2ANut/5/ – sjdaws 2013-02-23 11:23:41

谢谢！这一个（jsfiddle.net/2ANut/5/）工程gr8！ – JU1CY 2013-02-23 11:33:05

jquery fadein img background on mouse over，but not content indide

回答

相关问题