CSSで選択範囲外にハイライト効果を追加する方法はありますか？

Question

私はマウスでホバリング、それは他のボタンを表示し、選択ボックスの領域の外側にハイライト効果を持つことになります場合は、以下の概念のようなボックスを作っています：

私は外でハイライト効果を追加するには、それを達成することができ、どのようにちょうど純粋なCSSまたはjQueryの選択ボックスの領域？

Answer 1

（jQueryを使って）解決策1：

HTML：（この例のみのため）

<div class="box">text</div> 
<div class="box">text</div> 
<div class="box">text</div> 
<div class="box">text</div> 

CSS：

.box{ 
    transition:.3s; 
    background: #fff; 
    text-align: center; 
    padding: 2%; 
    margin: 2%; 
    width: 17%; 
    float: left; 
} 
.box.fade{ 
    opacity: 0.3; 
    transition: .3s; 
} 

のjQuery：

$('.box').on('mouseenter', function() { 
    $('.box').not($(this)).addClass('fade'); 
}); 

$('.box').on('mouseleave', function() { 
    $('.box').not($(this)).removeClass('fade'); 
}); 

の作業例：https://jsfiddle.net/k71fqn4o/1/

ソリューション2（純粋なCSS）：

あなたはこのソリューションを使用することができますので、あなたのボックスのコンテナを持っている場合は、しかしソリューション1はより安全です。

HTML：（この例のみのため）

<div class="container"> 
    <div class="box">text</div> 
    <div class="box">text</div> 
    <div class="box">text</div> 
    <div class="box">text</div> 
</div> 

CSS：

.box{ 
    transition:.3s; 
    background: #fff; 
    text-align: center; 
    padding: 2%; 
    margin: 2%; 
    width: 17%; 
    float: left; 
} 
.container:hover .box{ 
    opacity: 0.3; 
    transition: .3s; 
} 

.box:hover{ 
    opacity: 1 !important; 
} 

の作業例：https://jsfiddle.net/ogvudr5t/

Answer 2

Box-shadowはすべきことです。

Answer 3

box-shadow CSSプロパティ（および関連するベンダープレフィックス）を使用してハイライトエフェクトを実現できます。その他の要素は、:hover擬似セレクタとanimateルールを使用して消えることもできます。これを試してみてください：

div { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #EEE; 
 
    border: 1px solid #EEE; 
 
    border-radius: 5px; 
 
    transition: border, box-shadow 0.2s; 
 
    padding: 5px; 
 
} 
 
div button { 
 
    opacity: 0; 
 
    transition: opacity 0.2s; 
 
} 
 
div:hover { 
 
    border-color: #66afe9; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 
 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); 
 
} 
 
div:hover button { 
 
    opacity: 1; 
 
}

<div> 
 
    <button>Foo</button> 
 
</div>