CSS知识点总结（八）

最新推荐文章于 2024-04-01 17:53:03 发布

Mr.Groooooooot

最新推荐文章于 2024-04-01 17:53:03 发布

阅读量258

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/wdhxs/article/details/120041727

版权

本文介绍了如何使用CSS的filter属性在鼠标悬停时凸显当前元素并模糊其他元素。通过设置伪元素::before并应用filter效果，实现了元素间的高亮与模糊过渡。关键代码包括使用.boxeshover>.filter:not(:hover)::before选择器来确保只有非悬停元素被模糊，并通过transition平滑过渡。

摘要由CSDN通过智能技术生成

CSS知识点总结

一、利用CSS filter实现一个hover凸显当前元素，模糊其他元素的效果

html：

<div class="boxes">
    <div class="filter">看到见吗</div>
    <div class="filter">看到见吗</div>
    <div class="filter">看到见吗</div>
    <div class="filter">看到见吗</div>
    <div class="filter">看到见吗</div>
</div>

css：

.filter {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 200px;
   height: 200px;
   margin-right: 20px;
   color: white;
}

.filter:hover::before {
   transform: scale(1.05);
}

.boxes:hover>.filter:not(:hover)::before {
   filter: blur(5px) opacity(0.8) brightness(0.8);
}

.filter::before {
   /* 防止背景遮住元素内容 */
   z-index: -1;
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   border-radius: 20px;
   filter: blur(0) opacity(1);
   background-image: url('./filter.jpg');
   background-size: 200px 200px;
   transition: all 300ms linear;
}

首先，CSS的filter属性可以为元素添加blur和opacity属性，但是这样会导致其子元素也变得模糊。因此，不能对元素本身使用filter，那可以对伪元素使用filter，可以使用绝对定位且z-index=-1，这样就不会影响元素内容的显示。同时，这样hover时，变模糊的就只有before伪元素。