Question

我有三张“卡片”，三张独立的div。我试图让它成为如此，如果我将鼠标悬停在其中一张“卡片”上，其他两张将会模糊，但只有当其中一张正在盘旋时。

Here's a codepen example: https://codepen.io/jacobkjones/pen/gXqpeB

我知道如何进行模糊处理，但我不知道如何将它设置为只要我将鼠标悬停在box1上时box2和box3就会模糊。我甚至不确定这是否可以用CSS，但我更喜欢没有JS。

我尝试过使用多个CSS选择器，例如〜+但是没有一个能够提供所需的结果。

非常感谢任何帮助。

Answer 1

你只能用CSS来解决这个问题。那是因为there's no previous sibling selector in CSS。

所以给这个标记：

<div class="container">
  <div id="box1" class="card">
    <h1>one</h1>
    <p>some text here</p>
  </div>
  <div id="box2" class="card">
    <h1>two</h1>
    <p>some text here</p></div>
  <div id="box3" class="card">
    <h1>three</h1>
    <p>some text here</p></div>
</div>

使用这样的选择器悬停#box2时，您可以选择#box3和#box1：

div[id^="box"]:hover  ~ div[id^="box"] {
  //blurry stuff
}

但是当您悬停#box2或#box3时会发生什么？您不能在悬停的框之前更改框。

我们可以尝试向后思考并在默认情况下使事情模糊，然后执行一个简单的:hover选择器来取消您正在悬停的那个。这样你最终会得到你没有徘徊模糊的那些，但这不是你想要的，因为当没有盘旋时盒子看起来不正常。

这是一个使用jQuery .not()工作的方法的简单示例。如果你愿意的话，你可以用它来切换一个类来模糊，而不是把CSS放在函数中。

$(function(){
  var boxes = $('div[id^="box"]');
  $(boxes).on('mouseenter', function(){
    $(boxes).not($(this)).css('background-color', 'red');
  }).on('mouseleave', function(){
    $(boxes).css('background-color', 'initial');
  });;
});

.container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.card {
  border: solid black 1px;
  padding: 20px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="box1" class="card">
    <h1>one</h1>
    <p>some text here</p>
  </div>
  <div id="box2" class="card">
    <h1>two</h1>
    <p>some text here</p></div>
  <div id="box3" class="card">
    <h1>three</h1>
    <p>some text here</p></div>
</div>

最后注意事项：确保修复标头标记。对于标题二和三，您有一个<h1>开头标记，但</h2>结束标记。

Answer 2

在我尝试使此功能正常工作时进行了搜索。事实证明，可以只使用CSS（与其他答案相反）。它也很好。我在Mac上进行了测试，它可以在Chrome，Firefox，Safari，Edge（Windows 10）上运行，但不能在IE11（Windows 10）上运行。

.grid {
  display: flex;
}

.grid:hover .card {
  filter: blur(5px);
}

.card {
  padding: 10px;
  transition: all 0.2s ease-in-out;
}

.grid .card:hover {
  filter: blur(0);
}

<div class="grid">
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 1">
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 2">
  </div>
  <div class="card">
    <img src="http://placekitten.com/200/150" alt="kitten 3">
  </div>
</div>

或者，只需将其添加到CSS（see it in your example codepen）。

.container:hover .card {
  filter: blur(5px);
}

.container .card:hover {
  filter: blur(0);
}

模糊一切，但徘徊CSS

2 个答案: