div div悬停jquery不透明

我想使用fadeTo显示一个特定的div。如果我将鼠标悬停在div1上，那么spark1应该是可见的，并在鼠标消失时消失。div div悬停jquery不透明

但是，它在悬停时不会做任何事情，我也不知道为什么。

HTML

<div class="spark1"></div> 

<div class="div1">text</div>

CSS

.div1 { 
    width:300px; 
    height:300px; 
} 

.spark1 { 
    position:absolute; 
    width:27px; 
    height:27px; 
    margin-top:70px; 
    margin-left:395px; 
    background:url(../img/spark.png) no-repeat; 
}

$('.div1').hover(function(){ 
    $('.spark1').fadeTo(200, 0); 
});

EDIT（更新）

HTML

<div class="spark1"></div> 
<div class="div1"></div>

CSS

.div1 { 
width:300px; 
height:300px; 
background-color:#000000; 
} 

.spark1 { 
position:absolute; 
width:27px; 
height:27px; 
top:70px; 
left:395px; 
background-color:#ff0000; 
filter:alpha(opacity=0); opacity:0.0; 
}

  $('.project1').hover(function(){ 
       $('.spark1').fadeTo(200, 1); 
      }, 
      function(){ 
       $('.spark1').fadeTo(200, 0); 
      });

它仍然不会触发，我不明白这一点。如果你使用了正确的

来源

2012-02-27 meneerfab

即是一个不完整的悬停功能。有关示例，请参阅jQuery文档。 – 2012-02-27 15:23:53

它是完整的，但可能不是预期的。 – 2012-02-27 15:25:06

@Diodeus。有一个'.hover（handlerInOut（eventObject））'重载。 – 2012-02-27 15:25:59

你的代码工作css班级名称

DEMO

您定义了一个css类.spark { }，但在您的代码中，您使用的类名是.spark1。
选择一个或另一个。

来源

2012-02-27 15:24:17

。当我们将鼠标悬停在它上面时，它应该是可见的：P – footy 2012-02-27 15:31:24

是的，在我的代码中是正确的，这只是一个例子，但是您使其逆转为 – meneerfab 2012-02-28 08:28:31

你应该在stop the animation之前的事件触发前完成。试试这个

$('.div1').hover(function(){ 
    $('.spark').stop(true,true).fadeTo(200, 1); 
},function(){ 
    $('.spark').stop(true,true).fadeTo(200, 0); 
});

小提琴例如：http://jsfiddle.net/mK4m6/11/

来源

2012-02-27 15:28:28

。当我们把鼠标悬停在它上面时应该是可见的：P – footy 2012-02-27 15:34:02

我相信你可以做出这个改变.. :)无论如何更新... – 2012-02-27 15:35:55

你在你的悬停功能犯了一个错误。它有2个回调方法：

$(document).ready(function() { 
    $(".div1").hover(
     function(event) { 
      //hover in 
      $(".spark1").fadeTo(200,1); 
     }, 
     function(event) { 
      $(".spark1").fadeTo(200,0); 
     }); 
});

下面是一个工作脚本：

http://jsfiddle.net/U8rzJ/7/

来源

2012-02-27 15:28:40 footy

虽然我怀疑这种情况下要求两个参数，.hover（）* can * have 1论据。它在文档中：http://api.jquery.com/hover/#hover2 – 2012-02-27 15:30:52

@SurrealDreams是的，这种情况下需要两个参数。但是，我也同意你的看法 – footy 2012-02-27 15:33:30

大厦迪迪埃的良好的类名称的渔获物，有一个与你的悬停（）脚本的问题。 hover（）可以将一个或两个函数作为参数 - 如果只提供一个函数，则会在mouseover和mouseout两者上执行。你会想要这个，我认为：

$('.div1').hover(function(){ 
    //fade in to 100% 
    $('.spark').fadeTo(200, 100); 
}, 
function(){ 

    $('.spark').fadeTo(200, 0); 
});

这会淡化mousein中的.spark，并在mouseout中将其淡出。如果你只想在mouseout上动画，我会从.hover（）切换到.mouseout（）。

来源

2012-02-27 15:29:25

HTML

<div class="spark1"></div> 

<div class="div1">text</div>

CSS

.div1 { 
width:300px; 
height:300px; 
} 

.spark1 { 
position:absolute; 
width:27px; 
height:27px; 
top:70px; 
left:395px; 
background-color:#ff0000; 
filter:alpha(opacity=0); opacity:.0; 
}

jQuery的

$('.div1').hover(function(){ 
    $('.spark1').fadeTo(200, 1); 
}, 
function(){ 
    $('.spark1').fadeTo(200, 0); 
});

那么这是可行的。 1.使用正确的类的名字 2.设置spark1的初始不透明度为0 3.在的mouseenter褪色不透明度为1 4.在鼠标离开褪色不透明度为0

来源

2012-02-27 15:37:06

div div悬停jquery不透明

回答

相关问题