尝试将属性应用于 div [重复]中的所有兄弟元素
问题描述 投票：0回答：1
当用户将鼠标悬停在 div 中的一个项目上时，尝试更改 div 中一个项目（包裹图像的锚标记）的所有其他兄弟姐妹的不透明度。
它部分有效，但是当我将鼠标悬停在一个项目上时，悬停的兄弟姐妹右下角的所有兄弟姐妹都会改变不透明度，但左上角的所有兄弟姐妹都不会，我不确定我做错了什么。
参见下面的示例（我将鼠标悬停在第二行第二列项目上）
我已经将正在更改的同级项目的背景颜色更改为红色，以使其更加清晰。
代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<style>
/* CSS styles */
#imageTextGrid{
padding-top: 80px;
max-width:95vw;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap:40px;
/* slide in+opacity animation */
/* opacity: 0; */
position: relative;
/* left: -80%; */
margin: auto;
animation: slide-in 1s forwards;
transition: opacity 1s;
}
#imageTextGrid a:hover{
opacity:0.2;
}
#imageTextGrid a:hover ~ a{
opacity:0.5;
background-color: red;
}
</style>
</head>
<body>
<!-- Header -->
<div id="imageTextGrid" name="overview" >
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a> <a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
</div>
</html>
更改代码后的当前结果（GIF）： 当光标略微位于图像右侧时（尚未在图像本身中），样式已应用于图像。它应该只在光标位于图像本身上时应用。
当前代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<style>
/* CSS styles */
#imageTextGrid{
padding-top: 80px;
max-width:95vw;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap:40px;
/* slide in+opacity animation */
/* opacity: 0; */
position: relative;
/* left: -80%; */
margin: auto;
animation: slide-in 1s forwards;
transition: opacity 1s;
}
#imageTextGrid.hovered img {
opacity: 0.5;
background-color: red;
}
#imageTextGrid.hovered img:hover {
opacity: 1;
}
</style>
</head>
<body>
<!-- Header -->
<div id="imageTextGrid" name="overview" >
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a> <a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
</div>
<script>
const links = document.querySelectorAll('.gridImg');
const parent = document.querySelector('#imageTextGrid');
for(const link of links) {
link.addEventListener('mouseover', function() {
parent.classList.add('hovered');
});
link.addEventListener('mouseout', function() {
parent.classList.remove('hovered');
})
}
</script>
</html>
1个回答
1
投票
投票
你不能只用 CSS 来做到这一点，因为没有 CSS 规则来改变以前兄弟姐妹的样式（+ 和 ~ 仅表示下一个兄弟姐妹）。
这里解释一下这个主题：是否有一个“以前的兄弟姐妹”选择器？
但是你可以用简单的 JS 代码实现这个：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<style>
/* CSS styles */
#imageTextGrid{
padding-top: 80px;
max-width:95vw;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap:40px;
/* slide in+opacity animation */
/* opacity: 0; */
position: relative;
/* left: -80%; */
margin: auto;
animation: slide-in 1s forwards;
transition: opacity 1s;
}
#imageTextGrid.hovered img {
opacity: 0.5;
background-color: red;
}
#imageTextGrid.hovered img:hover {
opacity: 0.2;
}
</style>
</head>
<body>
<!-- Header -->
<div id="imageTextGrid" name="overview" >
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a> <a href="#" class="gridImg"><img class="popupHanne" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupIjsselmuiden" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
<a href="#2" class="gridImg"><img class="popupApeldoorn" src="https://www.uri.edu/wordpress/wp-content/uploads/home/sites/7/500x500.png" /></a>
</div>
<script>
const links = document.querySelectorAll('.gridImg img');
const parent = document.querySelector('#imageTextGrid');
for(const link of links) {
link.addEventListener('mouseover', function() {
parent.classList.add('hovered');
});
link.addEventListener('mouseout', function() {
parent.classList.remove('hovered');
})
}
</script>
</body>
</html>
最新问题
- LINQ 枢轴问题 - 将 SQL 脚本转换为 LINQ
- 为什么 SwiftUI 中的 snapshot() 无法捕获从 WebImage (SDWebImageSwiftUI) 下载的图像？
- 在较小的屏幕（手机、平板电脑）上查看时，将 div 堆叠在一起
- 对 var 'FlutterMethodNotImplemented' 的引用不是并发安全的，因为它涉及共享可变状态
- org.springframework.orm.ObjectOptimisticLockingFailureException
- SUPERSET 从 python 中的循环生成 SQL 模板
- 为什么我的速度场的功率谱 E(k) 遵循 𝑘 ^(−(n−1)) 而不是 𝑘^(−n)？
- 使用 Apache POI 合并 Excel 中的单元格
- Undertow在Springboot3.4.1中使用虚拟线程时停止响应
- Jest测试错误【错误：没有设置QueryClient，使用QueryClientProvider设置一个】
- 无法配置除 root 之外的任何路由
- 如何将空格开头的句子中的第一个字母大写
- 重新启动终端并使用 Dockerfile 运行命令
- 从 Lwc 调用 Apex 类，只有它被保存
- Excel：如何从过滤功能中排除错误
- 在同一个元素上translateX和translateY？
- 如何从数据集中删除数据表（有一堆关系）
- Appium Inspector 在 Linux Ubuntu 上无法打开
- 如何为apollo-server-lambda启用cors
- 使用事务和 squirrel 进行 Golang postgresql 查询
© www.soinside.com 2019 - 2024. All rights reserved.