悬停，我想要不透明度=“0.3”； 没有悬停，我想要不透明度=“1”； 每个 div 颜色中的 h2 和 h3 从白色变为红色。
我到处搜索并试图找出答案，但菜鸟就是菜鸟。 这是我尝试过的方法，但它仅适用于第一个 div。为什么不能为休息而工作？
我知道如果我使用类，我可以用 CSS 来完成，但我想在每个 div 中为 h2 和 h3 应用更多功能。例如，当悬停在框上时，h2 和 h3 显示从无变为块。或者颜色从白色变为红色。
这里是链接 笔上的密码
这是代码
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
<div id="box" onmouseover="hover()" onmouseout="nohover()"></div>
</body>
</html>
CSS
#box{
background: blue;
width:100px;
height: 100px;
margin: 20px;
}
js
function hover() {
document.getElementById("box").style.opacity = "0.3";
}
function nohover() {
document.getElementById("box").style.opacity = "1";
}
只需使用
:hover#box{
background: blue;
width:100px;
height: 100px;
margin: 20px;
}
#box:hover {
opacity: 0.3;
} <div id="box" ></div>
<div id="box" ></div>
<div id="box" ></div>
<div id="box" ></div>
使用类（.box）而不是使用id（#box）。 Web 可访问性指南不允许使用多个 ID。
https://www.w3.org/TR/WCAG20-TECHS/H93.html
.box {
background: blue;
}
.box:hover {
background: red
}
在
thisonmouse*function hover(ev) {
ev.style.opacity = "0.3";
}
function nohover(ev) {
ev.style.opacity = "1";
}
<div id="box" onmouseover="hover(this)" onmouseout="nohover(this)"></div>