0

hover, I want the opacity = "0.3"; no hover, I want the opacity = "1"; and h2 and h3 in each div color goes from white to red.

I've googled everywhere and tried to figure it out, but a noob is a noob. here is what I tried but it works for the first div only. why can't work for the rest?

I know if I use class, I can do it with CSS, but I want to apply more functions for h2 and h3 in each div. for example, when hover on box, h2 and h3 display goes from none to block.or color from white to red.

here is the link the code on pen

here is the code

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";
     }
Mad7Dragon
  • 1,237
  • 1
  • 10
  • 21
  • 4
    Don’t use the same `id` multiple times. Use a class. If you use a class, you can use the `:hover` selector in a CSS rule and avoid JS altogether. – D M Apr 23 '22 at 23:58
  • use `#box` as a class, like this `.box`. And in html for all div - `
    ` try it in css `.box:hover { opacity: 0.3 }`     – s.kuznetsov Apr 24 '22 at 00:03
  • I know if I use class, I can do it with CSS, but I want to apply more functions for h2 and h3 in each div for example, when hover on box, h2 and h3 display goes from none to block. – Mad7Dragon Apr 24 '22 at 00:46
  • https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page – Mister Jojo Apr 24 '22 at 01:09

3 Answers3

0

Use this in the onmouse* events:

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>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Mooshua
  • 526
  • 2
  • 16
0

Just use :hover css selector to add the styles

#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>
Siva K V
  • 10,561
  • 2
  • 16
  • 29
  • I know if I use class, I can do it with CSS, but I want to apply more functions for h2 and h3 in each div for example, when hover on box, h2 and h3 display goes from none to block. – Mad7Dragon Apr 24 '22 at 00:51
0

Use class (.box) instead of using id (#box). Multiple Ids is not allowed by web accessibility guidelines.

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

.box {
    background: blue;
}
.box:hover {
    background: red
 }
FeatherGlobe
  • 38
  • 1
  • 6