0

Jquery初心者の質問があります：

これが私のフィドルです：http：//jsfiddle.net/NinjaSk8ter/T8TNP/

これが私が達成する必要があることです： http ：//www.detailpaintinginc.com/index.php

ホバーに問題があります：

下のカラーボックスはすべて、ホバーすると不透明度が変わることに気付くでしょう。

特定の子div（クラス「box」を含む）の不透明度は.5に変更する必要があります。現在の状態では、1人の子にカーソルを合わせただけでも、すべての子の不透明度が変化しています。

4

3 に答える 3

4

これが動作するデモです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;
}

</ p>

JSコード

// absolutely none ! :)
于 2012-04-22T21:07:12.123 に答える
1

親をターゲットにするのではなく、効果を直接divに適用しないのはなぜですか？

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

また、.wrap要素の幅が狭すぎるため、ボックスが並んで表示されませんでした。

jsFiddleの例。

于 2012-04-22T20:55:58.340 に答える
0

ボックスが同じ行にスペースを確保するには、ラッパーを少し広くする必要があります。また、親ではなく各ボックスでホバー関数を実行して、ボックスを個別に反応させる必要があります。

$(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/

于 2012-04-22T20:58:03.283 に答える