使用css或javascript為具有相同id的多個div制作懸停效果的最簡單方法是什么？-有解無憂

懸停，我想要不透明度=“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;
  }

  function hover() {
document.getElementById("box").style.opacity = "0.3";
     }
 
function nohover() {
document.getElementById("box").style.opacity = "1";
     }

uj5u.com熱心網友回復：

只需使用:hovercss 選擇器添加樣式

#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>

uj5u.com熱心網友回復：

使用類 (.box) 而不是使用 id (#box)。Web 可訪問性指南不允許使用多個 ID。

https://www.w3.org/TR/WCAG20-TECHS/H93.html

.box {
    background: blue;
}
.box:hover {
    background: red
 }

uj5u.com熱心網友回復：

this在onmouse*事件中使用：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/463115.html

標籤：javascript html css 徘徊鼠标悬停

上一篇：當用戶點擊它時更改影像src是如何作業的？

下一篇：如何更改導航欄切換下拉選單中鏈接的顏色