ホバリングされた要素をより暗くしますが、他の要素はすべて明るくします

Question

これはCSSで可能なのかどうかはわかりませんが、要素上にマウスを置くと、より暗くなります（不透明度0.9）その他の要素は軽くなります（不透明度0.1）。要素が何も配置されていないときは、すべての要素の不透明度を0.5にしたいと思います。マークアップは次のようになります：箱の

<div class="box a"></div> 
<div class="box b"></div> 
<div class="box c"></div> 
<div class="box d"></div> 

レイアウトは無関係です。

JS/jQueryが必要ですか？

Answer 1

jqueryは必要ありません。これはCSSで行うことができます。下のコードを試してみて、あなたが望むものを作る方法をあなたに教えてくれるでしょう。

.box { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 10px; 
 
    opacity: 0.6; 
 
} 
 

 
.wrap:hover .box:hover { 
 
    opacity: 0.9; 
 
} 
 

 
.wrap:hover .box:not(:hover) { 
 
    opacity: 0.4; 
 
}

<div class="wrap"> 
 
    <div class="box a"></div> 
 
    <div class="box b"></div> 
 
    <div class="box c"></div> 
 
    <div class="box d"></div> 
 
</div>

Answer 2

それはCSSで可能ですわかりません。しかし、簡単にjQueryのjsのと少しの助けを借りて行うことができます。

$(".box").hover(
 
\t function() { 
 
    \t $(".box").each(function(){ 
 
    \t $(this).css("opacity", 0.1); 
 
    }); 
 
    \t $(this).css("opacity", 0.9); 
 
    }, 
 
    function() { 
 
    \t $(".box").each(function(){ 
 
    \t $(this).css("opacity", 0.5); 
 
    }); 
 
    } 
 
);

.box { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box a">a</div> 
 
<br> 
 
<div class="box b">a</div> 
 
<br> 
 
<div class="box c">a</div> 
 
<br> 
 
<div class="box d">a</div>

Answer 3

非常にまっすぐ進む.hover()方法は、あなたの意図した動作を与えることができます。

コードスニペットデモンストレーション：

jQuery('.box').hover(function(){ 
 
    jQuery(this).addClass('darken'); /* darken hovered element */ 
 
    jQuery('.box').not(jQuery(this)).addClass('lighten'); /* lighten all other elements */ 
 
}, function(){ 
 
    jQuery('.box').removeClass('darken lighten'); /* reset after hover out */ 
 
});

.box { 
 
    background: #0072ff; 
 
    width: 55px; 
 
    height: 55px; 
 
    display: inline-block; 
 
    transition: .7s; 
 
    opacity: .5; 
 
} 
 

 
.darken { 
 
    opacity: .9; 
 
} 
 

 
.lighten { 
 
    opacity: .1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box a"></div> 
 
<div class="box b"></div> 
 
<div class="box c"></div> 
 
<div class="box d"></div>

Answer 4

は本当にこれを達成するために、JS！基本的なCSSの知識が必要です。 :)

.Container { 
 
    cursor: default; 
 
} 
 

 
.Container:hover .Element:not(:hover) { 
 
opacity: 0.1; 
 
} 
 

 

 
.Element { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: rebeccapurple; 
 
    display: inline-block; 
 
    margin: 16px; 
 
    cursor: pointer; 
 
    opacity: 0.5; 
 
    transition: all 200ms; 
 
} 
 

 

 
.Element:hover { 
 
    opacity: 0.9; 
 
}

<div class="Container"> 
 
    <div class="Element"></div> 
 
    <div class="Element"></div> 
 
    <div class="Element"></div> 
 
    <div class="Element"></div> 
 
</div>