Размытие всего фона при наведении

Question

Итак, у меня есть несколько пунктов на моей первой странице, где показано несколько аниме.То, что я хочу сделать, это когда вы наводите курсор на первое шоу «Охотник X Охотник», я хочу, чтобы все остальное на странице, кроме того, которое находится над ним, было размытым.

Я посмотрел вокруг и увидел несколько примеров, но я чувствую, что моя ситуация немного отличается.Все элементы на первой странице просто выводятся из базы данных.

$fetch = mysqli_query($conn, "SELECT * FROM shows");
while($row = mysqli_fetch_array($fetch)){
    $ID = $row['ID'];
    $ShowName = $row['ShowName'];
    $ShowID = $row['ShowID'];
    $Updated = $row['Date'];
    $Poster = $row['Poster'];
    $Description = $row['Description'];

    echo '
    <div class="col s2 m2 2">
    <div class="card large">
    <div class="card-image">
      <img src="'.$Poster.'">
      <span class="card-title" style="color:white; text-shadow: 0 1px black;background:rgba(0,0,0,0.18);padding: 4px 8px;"><strong>'.$ShowName.'</strong></span>
    </div>
    <div class="card-content">
      <p>'.$Description.'</p>
    </div>
    <div class="card-action">
      <center><a href="player.php?showid='.$ShowID.'">Watch Now!</a></center>
    </div>
  </div>
  </div>
    ';
}

Кто-нибудь может указать способ начать?Я как бы застрял на этом.

Answer 1

Это выполнимо, см. Ниже:

HTML

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
<ul>

CSS

body:hover li:not(:hover) {
  filter: blur(2px);
}

Живой пример можно найти на codepen здесь: https://codepen.io/anon/pen/eXpmZL?editors=1100

Как это работает, мы не хотим размыть какие-либо элементы списка, если пользователь не наведет указатель мыши на тело страницы.Это предотвращает размытие элементов, когда, например, указатель мыши находится над браузером Chrome или полосой прокрутки.Тогда оператор CSS читает размытие всех компонентов li, но не того, который в данный момент находится над.

Answer 2

Есть несколько подходов.Самым простым из них может быть использование селекторов :hover и :not(:hover), которые будут размыть все, когда вы наводите указатель мыши внутри родительского контейнера <div class="col s2 m2 2">, в вашем случае, но дочерний элемент, который находится при наведении (<div class="card large"> вваш случай) останется не размытым.

.container {
  display: flex;
}

.card {
  margin: 1rem;
}

.container:hover > .card:not(:hover) {
  filter: blur(4px);
}

<div class="container">
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
  <div class="card">
    <img src="http://placekitten.com/120/120">
  </div>
</div>

Вы также можете сделать это с JS несколькими способами, например, добавив событие onmouseover для добавления класса.