html - 悬停元素时更改另一个元素的 ::after 选择器
问题描述
我有一个超级简单的页面,由背景和中间的徽标组成。当我将鼠标悬停在中间的徽标上时,我想更改背景图像的过滤器。我怎样才能做到这一点?我尝试使用 + > ~ 运算符,但无法使其工作。这是我的 CSS
.showcase::after {
content:'';
height: 100vh;
width: 100%;
background-image: url(resim.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: block;
transition: all 1s;
filter: saturate(140%);
}
.logo {
position: absolute;
z-index: 1;
width: 100px;
transition: all 1s;
filter: opacity(0%);
cursor: pointer;
}
.logo:hover + .showcase::after {
filter: saturate(0%);
}
这是我的 HTML
<body>
<header class="showcase">
<img src="logo.png" class="logo" alt="">
</header>
</body>
</html>
解决方案
推荐阅读
- concurrency - 无法识别死锁
- python - 如何将数据帧从长转换为宽,索引中的值按年份分组?
- stripe-payments - 在 Stripe 之外开具发票时,使用什么 Stripe webhook 来捕获订阅续订?
- laravel - Yajra Laravel Datatable 列排序和搜索在服务器端模式下不起作用
- typescript - istanbul 和 jest 中未涵盖的函数和语句
- javascript - 使用 lodash 或下划线过滤对象数组
- sql - SQL查询返回相同字段的多行
- python - 内置的python函数'print'如何在堆栈/堆中工作
- c# - 如何在 C# 的通用规范模式中为嵌套对象添加 .ThenInclude
- sql - 全文搜索不适用于 MATCH() 和 AGAINST()