如何使用CSS在选区区域外添加高光效果？

Question

当我用鼠标悬停时，我会在下面创建一个类似概念的盒子，它会显示其他按钮并在选择框区域外有高亮效果：

那么我怎么能用纯css或jquery在选择框区域外添加高亮效果呢？

Answer 1

解决方案1（使用jQuery）：

HTML：

awk -F: '{ print $5 ":" $6 }' <input.txt >output.txt

CSS（仅适用于此示例）：

skimage.measure.regionprops

jQuery的：

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

工作示例：https://jsfiddle.net/k71fqn4o/1/

解决方案2（纯css）：

如果您的盒子有容器，那么您可以使用此解决方案，但解决方案1 ​​更安全。

HTML：

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

CSS（仅适用于此示例）：

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

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

工作示例：https://jsfiddle.net/ogvudr5t/

Answer 2

您可以使用box-shadow CSS属性（以及相关的供应商前缀）实现突出显示效果。使用:hover伪选择器和animate规则也可以淡化其他元素。试试这个：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

Box-shadow应该可以做到这一点。