个人中心
gpt4 book ai didi

javascript:鼠标悬停用于背景着色和不透明度

转载 作者：太空宇宙 更新时间：2023-11-04 14:27:59 25 4
gpt4 key购买 nike

从昨天开始，我开始使用 javascript 制作适用于页面主体的悬停效果(我想在悬停 div 时更改页面主体的背景颜色)，

我看过一些教程并自己尝试过，但最终失败了，我想知道如何使用 javascript 创建这种效果，我使用了类似的方法。

function mouseOver() {
  document.getElementsByClassName("body").style.backgroundColor = "black"
}

function mouseOut() {
  document.getElementsByClassName("body").style.backgroundColor = "white"
}
.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("accueil.png") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: white/* rgb(0,85,170); */
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseover="mouseover()" onmouseout="mouseout()" class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
        <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>
  </div>


</body>

</html>

我不能使用 jQuery，否则我一开始就不会尝试问这个问题，我需要知道如何将 JS 文件中的悬停效果应用到我的 html 和 css 页面中

-编辑-

有人教我如何使用鼠标悬停和背景着色，但我想问另一件事，它是关于不透明度的，我想在其他 div 上设置不透明度我决定在我做的事情上做同样的事情在 document.lycee.style.opacity = "0.1"; 和 document.formations.style.opacity = "0.1"; 之前被教过，但它实际上不起作用，至于 document.body.style.opacity = "0.1"; ，它改变了整个页面的不透明度。你能帮我最后一次吗？

最佳答案

确保您的 Javascript 代码在内容之后加载，并将 onmouseOver 替换为 onmouseover。

代替document.getElementsByClassName("body").style.backgroundColor = "黑色"你可以这样做document.body.style.backgroundColor = 'red';

如果你想玩DIV的

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
  divs[i].style.opacity = "0.8";
}

如果你只想改变带有className的特定元素的样式

var divs = document.getElementsByClassName('classNameHere');
for(var i=0; i < divs.length; i++) {
  divs[i].style.opacity = "0.8";
}

已编辑!

关于javascript:鼠标悬停用于背景着色和不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44776978/

25 4 0
文章推荐： c++ - LD_DEBUG=Windows Visual Studio 的文件？
文章推荐： java - 从文本文件中的字符串创建网格
文章推荐： c++ - Objective-C++内存问题
文章推荐： java - 在 Eclipse 中设置 MAVEN_HOME
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com