如何在CSS選擇區域之外添加突出顯示效果？

Question

我提出類似概念的盒子鼠標懸停時，它會顯示其他按鈕和具有高光效果的選擇框以外的地區如下：

所以，我怎麼能實現它在添加外突出顯示效果選擇框的區域只是純CSS或jQuery的？

Answer 1

方案1（使用jQuery）：

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>