HTML Mouseover image over image推出

Question

我试过这么多的组合，而这一个是最接近我可以得到我需要的。我需要的是一个图像（img1），另一个（较小的）图像（img2）在它上面，当我翻转img1时，我希望它淡入（并在推出时淡出），使img2保持原样。
我得到的问题是，当我滚动img2，这是img1，jquery认为我正在推出img1并淡化它！

这是我到目前为止有：

.photo_link { 
    position: relative; 
    float: left; 
    display: block; 
    width: 133px; 
    height: 410px; 
    margin-top: 9px; 
} 
#home_1 { 
    background-image: 'photo_home_1.jpg'); 
} 
.new { 
    border: 0; 
    position: absolute; 
    top: 20px; 
} 

<a class="photo_link"> 
    <span class="photo" id="home_1"></span> 
    <img class="new src="new.png" /> 
</a> 

$(function(){ 
    $('.photo') 
     .mouseover(function(){ 
      $(this).stop().fadeTo("fast", 1); 
     }) 
     .mouseout(function(){ 
      $(this).stop().fadeTo("slow", 0.2); 
     }) 
}); 

是否有避免这种的方法吗？

Answer 1

我想补充的鼠标事件的.photo_link元素，并使用$.mouseenter()和$.mouseleave()，它不会被触发，当鼠标不再是“过度”的元素在其中移动鼠标时，“走出去”，并在一个元素：

$(function(){ 
    $('.photo_link') 
     .mouseenter(function(){ 
      $(this).find('img').stop().fadeTo("fast", 1); 
     }) 
     .mouseleave(function(){ 
      $(this).find('img').stop().fadeTo("slow", 0.2); 
     }) 
}); 

http://jsfiddle.net/CMyAZ/

如果float; left，你不需要display: block（这意味着）。我清理了一些CSS。另外，我想你想隐藏（opacity: 0.2）在页面加载的元素（见Quirksmode for cross-browser opacity）：

.photo_link { 
    position: relative; 
    float: left; 
    width: 128px; 
    height: 128px; 
    margin-top: 9px; 
} 
#home_1 { 
    position: absolute; 
    z-index: 1; 
    display: block; 
    top: 20px; 
    left: 0; 
    height: 32px; 
    width: 32px; 
    background: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG'); 
} 
.new { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    border: 0; 
    opacity: 0.2; 
} 

Answer 2

你可以用CSS动画也做了，

.photo_link>span{ 
display: block; 
transition: all 2s; 
-moz-transition: all 2s; /* Firefox 4 */ 
-webkit-transition: all 2s; /* Safari and Chrome */ 
-o-transition: all 2s; /* Opera */ 
} 

.photo_link:hover>span{ 
display: none; 
} 

或用JS，简单地套用fadeToggle即：

$('.photo_link') 
     .mouseover(function(){ 
      $(this).find("span").fadeToggle("fast"); 
     }) 
     .mouseout(function(){ 
      $(this).find("span").fadeToggle("fast"); 
     }) 

而且在你的代码中，我发现了一些错误， - >类=“new * ” * src =“<”>缺失。

Answer 3

这个工作对我来说，简单的解决方案...

http://jsfiddle.net/YWzDH/3/

HTML：

<img class="img2" src="img2.jpg" /> 
<img class="img1" src="img1.jpg" /> 

的jQuery：

$(document).ready(function(){ 
    $('body').live({ 
      mouseenter: function() { 
       $('.img2').fadeTo("fast", 1); 
      }, 
      mouseleave: function() { 
       $('.img2').fadeTo("slow", 0.2); 
      } 
     }, '.img1, .img2'); 

}); 

CSS：

.img1{ 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.img2{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 0.2; 
}