0

私は6枚の画像を持っています。それらがロールオーバーされると、css hover を使用して画像が変更されます。画像をクリックすると元の画像が表示されますが (再び css を使用)、画像を選択すると残りの画像が薄暗くなります。私はさまざまな JS オプションを調べてきましたが、うまく動作しないようです。誰か提案はありますか？

4

1 に答える 1

3

別の解決策は、選択した画像と画像の親にクラスを追加することです。これにより、スタイリングがすべて css で行われるため、保守が容易になります。

ここでの簡単な例:

CSS

.img{
    display:inline-block;
    height:40px;
    width:40px;
    border:1px solid black;
}

.clicked .img{
    opacity:0.3;
}

.clicked .img.selected{
    opacity:1;
    background:red;
}

js

​
$('.img').on('click', function() {
    $('.img').removeClass('selected');
    $(this).addClass('selected');
    $('.container').addClass('clicked');
})​

html

<div class="container">
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
</div>​

http://jsfiddle.net/renekoch/y6YCc/

于 2012-10-15T20:32:59.890 に答える