悬停时模糊整个背景 [英] Blur entire background on hover

查看：42
本文介绍了悬停时模糊整个背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我的首页上有一些项目，其中展示了一些动漫.我想要做的是，当您将鼠标悬停在第一个节目Hunter X Hunter"上时，我希望页面上的所有其他内容都将被悬停的内容模糊化.

我环顾四周，看到了一些例子，但我觉得我的情况有点不同.首页上的所有项目都只是从数据库中回显出来.

$fetch = mysqli_query($conn, "SELECT * FROM 显示");while($row = mysqli_fetch_array($fetch)){$ID = $row['ID'];$ShowName = $row['ShowName'];$ShowID = $row['ShowID'];$Updated = $row['Date'];$海报 = $row['海报'];$Description = $row['Description'];回声'<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 class="card-content"><p>'.$Description.'</p>

<div class="card-action"><center><a href="player.php?showid='.$ShowID.'">立即观看！</a></center>

';}

谁能指出开始的方式?我有点坚持这个.

解决方案

有几种方法.最简单的方法是使用 :hover 和 :not(:hover) 选择器，当您将鼠标悬停在父容器 内时，它们会模糊所有内容.div class="col s2 m2 2">，在你的情况下，但是被悬停的子元素(<div class="card large"> 在你的情况下) 将保持不模糊.

.container {显示:弹性；}.卡片 {保证金:1rem；}.container:hover >.card:not(:hover) {过滤器:模糊(4px)；}

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

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

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

您还可以通过多种方式使用 JS 来实现这一点，例如，通过附加一个 onmouseover 事件来添加一个类.

So I have a few items on my front page, which shows a few anime. What I am looking to do is when you hover over say the first show, "Hunter X Hunter", I want everything else on the page excluding the one that is being hovered over to be blurred.

I have looked around and seen a few examples, but I feel my situation is a bit different. All the items on the front page are just being echo'ed out from the database.

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

Can anyone point the way to start? I'm kind of stuck on this.

解决方案

There are a couple of approaches. The easiest one could be utilizing :hover and :not(:hover) selectors, which will blur everything when you hover your mouse inside of the parent container <div class="col s2 m2 2">, in your case, but the child element that is being hovered (<div class="card large"> in your case) will remain non-blurred.

.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>

You could also do that with JS in multiple ways, for example, by attaching an onmouseover event to add a class.

这篇关于悬停时模糊整个背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆