Question

我有一个问题，jquery mouseover和mouseout不能与css函数一起使用.. 我正在尝试为图像滑块上的按钮设置过渡效果。

我的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的新手所以非常感谢任何帮助。

Answer 1

尝试使用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"
        });
    });
});

Answer 2

我已将您的代码放入Fiddle。这不会奏效。

然后我清理了一下，摆脱了一些语法错误here并且瞧瞧：它有效。

注意：如果您只是要改变不透明度，那么最好只使用CSS：

#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*/

jQuery鼠标悬停和mouseout无法正常运行

2 个答案: