Question

我有一个Jquery新手问题：

这是我的小提琴：http://jsfiddle.net/NinjaSk8ter/T8TNP/

以下是我需要完成的任务：http://www.detailpaintinginc.com/index.php

我的悬停有问题：

您会注意到较低的颜色框在悬停时都会改变不透明度。

特定子div（带有“box”类）的不透明度应更改为.5现在它的状态即使我只悬停在一个孩子身上，所有孩子的不透明度也会发生变化。

Answer 1

这是一个工作演示http://jsfiddle.net/pomeh/U4dyE/你不需要Javascript来做这个效果，看看代码：）

HTML代码

<div id="container">
     <div class="wrap">
         <div class="box"></div>
         <div class="box"></div>
     </div>
</div>

CSS代码

#container {
    width: 300px;
    height: 300px;    
}

/* DRY :) */
.wrap, .box {
    width: 50px;
    height: 50px; 
    float: left;
    margin: 1px 1px 1px 1px;
}


.box {
    background-color: red;

    opacity: 1;
    filter:alpha(opacity=100);
    /* animation for "mouse out" */
    -webkit-transition: opacity 0.5s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s linear;  /* FF4+ */
        -ms-transition: opacity 0.5s linear;  /* IE10 */
         -o-transition: opacity 0.5s linear;  /* Opera 10.5+ */
            transition: opacity 0.5s linear;
}

.box:hover {
    opacity: 0.5;
    filter:alpha(opacity=50);
    /* animation for "mouse in" */
    -webkit-transition: opacity 0.5s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s linear;  /* FF4+ */
        -ms-transition: opacity 0.5s linear;  /* IE10 */
         -o-transition: opacity 0.5s linear;  /* Opera 10.5+ */
            transition: opacity 0.5s linear;
}

JS代码

// absolutely none ! :)

Answer 2

为什么不直接将效果应用于div而不是定位到父级？

$('.box').hover(function() {
    $(this).stop().animate({
        "opacity": .5
    }, 50)
}, function() {
    $(this).stop().animate({
        "opacity": 1
    }, 50)
});

另外，.wrap元素的宽度太窄，这就是盒子没有并排出现的原因。

<强> jsFiddle example

Answer 3

您的包装需要更宽一点，以便盒子在同一条线上有空间。你也应该在每个盒子而不是它们的父盒子上运行悬停功能，让它们单独作出反应：

$(function () {
    $('.wrap .box').hover(function() {
        $(this).stop().animate({'opacity': 0.5}, 50);
    }, function() {
        $(this).stop().animate({'opacity': 1}, 50);
    });
});

http://jsfiddle.net/Codemonkey/T8TNP/7/

JQuery悬停动画

3 个答案: