JQuery悬停动画

Question

我有一个 Jquery 新手问题:

这是我的 fiddle :http://jsfiddle.net/NinjaSk8ter/T8TNP/

这是我需要完成的:http://www.detailpaintinginc.com/index.php

悬停有问题:

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

特定子 div(类为“box”)的不透明度应更改为 .5 现在，即使我只将鼠标悬停在一个 child 上，所有 child 的不透明度都会发生变化。

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 ! :)