jQuery的鼠标悬停和鼠标不能按需运行

-2

我有一个问题，其中jQuery的鼠标悬停和鼠标不能与CSS函数一起工作.. 我想图像滑块上的按钮的过渡效果。jQuery的鼠标悬停和鼠标不能按需运行

我的HTML代码：

<div id="hero"> 
    <div id="next"> 
     <img class="nxt" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/next.png"/> 
    </div> 
    <!--END--Next--> 

    <div id="prev"> 
     <img class="prv" src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/prev.png"/> 
    </div> 
    <!--END--Prev--> 

    <div id="slider"> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide1.png"/> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide2.png"/> 
     <img src="http://www.uk-timber.co.uk/ebay2014/images/jsSlider/slides/slide3.png"/>    
    </div> 
    <!--END--Slider--> 
</div> 
<!--END--Hero-->

我的CSS代码：

#hero { 
    width: 944px; height: 360px; 
    position: relative; 
    margin: auto; 

} 

#slider { 
    width: 944px; height: 360px; 
    position: absolute; 
    overflow: hidden;  
} 

#next { 
    position: absolute; 
    top: 250px; 
    right: 15px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0.3; 
} 

#prev { 
    position: absolute; 
    top: 250px; 
    left: 15px; 
    z-index: 99; 
    cursor: pointer; 
    opacity: 0.3; 
}

，最后我的JS代码：

$(function() { 
    $("#hero").mouseover(function() { 
     $this = $(this); 
     $this.find("#next").css(
      "transition":"all 0.2s ease-in", 
      "opacity":"1" 
     ); 
    }).mouseout(function() { 
     $this = $(this); 
     $this.find("#next").css(
      "transition":"all 0.2s ease-out", 
      "opacity":"0.3" 
     ); 
    }); 
});

请记住袒露我是新来的JavaScript和jQuery所以任何帮助非常感谢。

来源

2014-06-06 MartynMc

它应该是：'的.css（{转变：“所有0.2S易于在”如果你只打算更改不透明度，你最好只用CSS做，opacity：1}）'etc。现在你应该首先学习如何调试javascript。顺便说一句，'$ this.find（“＃next”）'没有意义，因为在文档上下文中ID必须是唯一的。 –

不能正确地工作，发生了什么，以及你期待什么。只是发布一些代码，“不工作”告诉我们什么？ – adeneo

在CSS中有一个“缓入式”的功能，它们都不使用JavaScript？ – adeneo

尝试使用mouseleave函数。

$(function(){ 
    $("#hero").mouseover(function() { 
     $this = $(this); 
     $this.find("#next").css({ 
      "transition":"all 0.2s ease-in", 
      "opacity":"1" 
     }); 
    }).mouseleave(function() { 
     $this = $(this); 
     $this.find("#next").css({ 
      "transition":"all 0.2s ease-out", 
      "opacity":"0.3" 
     }); 
    }); 
});

来源

2014-06-06 13:18:25 Illaya

这不是有效的语法的CSS方法，但很好的捕捉有关mouseleave –

如果你切换到mouseleave，使用mouseenter也是有道理的，但你怎么可能知道mouseover和mouseout不是正是OP想要的。 – adeneo

我已将您的代码放入Fiddle。这不起作用。

然后我清理了一下，摆脱了一些语法错误here和瞧：它的工作原理。

注：

#next{ 
    opacity: 0.3; 
    transition: all 0.2s; 
    transition-timing-function: ease-out; 
} 

#hero:hover #next{ 
    opacity: 1; 
    transition-timing-function: ease-in; 
} 

/*DON'T FORGET TO PREFIX THE TRANSITION-ATTRIBUTES*/

来源

2014-06-06 13:52:06 LuudJacobs

jQuery的鼠标悬停和鼠标不能按需运行

回答

相关问题