尝试将属性应用于 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>
最新问题
- 如何禁用 Delphi 11.3 在完成后自动隐藏编译器对话框？
- 计算具有相邻转位且无插入或删除的序列的距离
- 使用同一元素的多个副本初始化 C# 数组
- 如何更好地编写函数逻辑？
- 创建九九乘法表？
- 使用 WPF 以编程方式更改语言/资源
- 在sqlplus中如何更改或特定文件编码为utf8
- peerjs peer.connect 未对某些用户开放
- 从 UPS RESTful API 反序列化不一致的单个/数组数据
- 如何对文件中的每一行进行 sha256 处理？
- 在 Azure 数据工厂中，当 False 条件完成时停止管道运行
- 在 VSCode 中运行 R - R 未附加
- 在 sailpoint iiq 中进行配置
- Office-JS 和 VBA Addin 如何混合在一起
- NestJS 中使用 TLS 连接的 MySQL
- 需要帮助在 CSS 中将按钮居中
- 如何从不同文件夹导入Python模块
- Debian 10：如何修复“错误：系统不完全支持snapd：无法使用“squashfs”挂载squashfs图像
- 从具有给定中位数的数据帧创建数据区间
- 查找包含具有最近“日期”的内部对象的外部对象，其中其“id”是给定值
© www.soinside.com 2019 - 2024. All rights reserved.