Question

我正在尝试使用jquery，因此当div和/或它的内容悬停或具有焦点时，具有相同类的其他div将被模糊（css3）。

然后在鼠标移出或失去焦点时，一切都应该是不模糊的。

html看起来像这样（简化）：

<div class="card"><input type="text"></div>
<div class="card"><input type="text"></div>
<div class="card"><input type="text"></div>

我很欣赏任何想法。谢谢

Answer 1

您可以使用.siblings()，.toggleClass()切换悬停元素的同级className，css filter设置为blur(npx)其中n 1}}是表示px单位的位置编号。

$(".card").hover(function() {
  $(this).siblings().toggleClass("hover")
})

.card.hover {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="card"><input type="text">card</div>
  <div class="card"><input type="text">card</div>
  <div class="card"><input type="text">card</div>

要仅使用css，您可以在容器元素中放置.card元素;使用选择器css将容器元素filter:blur(0px)设置为.container .card:not(:hover)，将.container:hover .card:not(:hover)选择器设置为filter:blur(npx)

.container:hover .card:not(:hover) {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}

<div class="container">
  <div class="card"><input type="text">card</div>
  <div class="card"><input type="text">card</div>
  <div class="card"><input type="text">card</div>
</div>

jQuery - 当一张卡片悬停或有焦点时，另一张卡片模糊

1 个答案: