-4

次のWebサイト（ http://www.gazelle.com/ ）を開き、画像の上にマウスを置くと、画像に何らかの影響が見られます（すべての画像がグレー表示され、1つの画像のみが色付けされます）。

効果の名前を呼んでください。私は自分でさらに調査し、コードを書くことができます。コアのアイデアがわかりません。

コードを調べてみました。最初はマウスオーバーで画像が変わると思いましたが、そうではありません。表示されている画像のみが表示されていることがわかります：http：//m0-beta.gazelle.com/images/pages/index/main_stack_products.png

4

4 に答える 4

2

私はCSSと：hoverCSS疑似クラスを次のように使用してそれを行います：

<ul>
    <li class="one">Object 1</li>
    <li class="two">Object 2</li>
    <li class="three">Object 3</li>
</ul>

と

ul li {
    width: 110px;
    height: 180px;
    text-align: center;
    display: inline-block;
    background: url('http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png') no-repeat 0 0;
}
ul:hover > li {
    opacity: 0.6;
}
ul li:hover {
    opacity: 1;   
}
ul li.one {
    background-position: -110px 20px;   
}
ul li.two {
    width: 120px;
    background-position: -230px 20px;   
}
ul li.three {
    width: 100px;
    background-position: -365px 20px;   
}

http://jsfiddle.net/xESQK/

別の解決策は、同じHTMLを使用するjQueryです（ここでタイムアウトを使用できます）。

$(document).ready(function() {
    $('ul li').bind('mouseover', function() {
        $siblings = $(this).siblings();
        $siblings.animate({"opacity": "0.4"}, "fast"); 
    }).bind('mouseout', function() {
        $siblings.css('opacity', 1).stop(); 
    });
});

http://jsfiddle.net/xESQK/2/

于 2013-01-26T10:37:41.027 に答える
2

各<li>要素には、発見した背景画像があります。そして、background-positionはそれぞれ異なります<li>。（このように、それぞれ<li>が1つの画像を表示します）

マウスカーソルが1つの画像の上にあるときに、他の画像の不透明度を変更するcssルール（javascript関数でもかまいません）があります。つまり、マウスをiPadの上に置くと、他のすべて<li>の不透明度は0.5に設定されます。

これは、ウェブサイトが効果を達成する方法です。

編集済み：HTML要素を調べると、おそらくこのすべての動作が発生していることがわかります。

于 2013-01-26T10:25:29.633 に答える
2

2つのスタイルルールで十分です。いくつかの.image要素を含む.container要素があると仮定します。.image要素は、前述の例のように、背景のスプライト画像を含むIMG、DIV、またはLIにすることができますが、これは問題ではありません。効果は次のように達成できます。

.container:hover .image { opacity: .5; }
.container:hover .image:hover { opacity: 1; }
于 2013-01-26T10:28:39.850 に答える
0

このように使用できます。デモ 

$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        $(this).parent('li').css({position:'relative'});
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': 'orange',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
        }).bind('mouseout', function(){
            $(this).remove();
        }).insertAfter(this);
    });

});
于 2013-01-26T10:30:13.257 に答える