什么是使用CSS或JavaScript具有相同ID的多个DIV的悬停效应的最简单方法？

发布于 2025-01-23 16:57:39 字数 1342 浏览 4 评论 0原文

悬停，我想要不透明度=“ 0.3”; 不悬停，我想要不透明度=“ 1”; 每种div颜色中的H2和H3从白色到红色。

我在各处搜索过谷歌搜索，并试图弄清楚它，但是菜鸟是菜鸟。这是我尝试的方法，但仅适用于第一个Div。为什么其余的工作不能工作？

我知道如果我使用课程，我可以使用CSS进行，但是我想在每个Div中应用更多功能。例如，当悬停在框上时，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";
     }

原文

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;
  }

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷炫老祖宗 2025-01-30 16:57:39

只需使用：悬停 CSS选择器添加样式

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

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>

回复收藏 0 原文

轻许诺言 2025-01-30 16:57:39

使用类（.box）而不是使用ID（#box）。 Web可访问性指南不允许多个ID。

https://www.org/www.org/tr/wcag20-techs/h93。 html

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

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
 }

回复收藏 0 原文

樱花落人离去 2025-01-30 16:57:39

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

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>

回复收藏 0 原文

~没有更多了~

关于作者

白色秋天

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

什么是使用CSS或JavaScript具有相同ID的多个DIV的悬停效应的最简单方法？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

什么是使用CSS或JavaScript具有相同ID的多个DIV的悬停效应的最简单方法？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。