Question

自从2周以来，我一直在使用鼠标悬停效果的页面，我在我的html和css中创建了3个鼠标悬停图像，现在，我想到了一个像焦点一样的新效果在“悬停”的对象上，例如：

如果我悬停div 1，不透明度的页面将大大减少，主要是我添加低“不透明效果”的背景颜色。

这里的问题是我无法弄清楚如何做到这一点，我已经尝试了

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

但它不起作用。

我还想知道我以后需要使用javascript吗？我已经和它合作了，我真的不知道它是如何工作的。

.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("http://via.placeholder.com/350x150") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: 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 class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/350x150" />
        <img class="image imagesecond" src="http://via.placeholder.com/350x150" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/350x150" />
        <img class="image imagefourth" src="http://via.placeholder.com/350x150" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/350x150" />
        <img class="image imagesixth" src="http://via.placeholder.com/350x150" />
      </div>
    </a>
  </div>


</body>

</html>

Answer 1

document.body.onload = function(){
   colleges = document.body.getElementsByClassName("college");

   for (var i = 0; i < colleges.length; i++) {
    colleges[i].addEventListener('mouseover', function(){
      document.body.style = "background-color: black"; //apply styles here
    });    
    colleges[i].addEventListener('mouseout', function(){
      document.body.style = ""; //revert changes
    });
  }
}

但是，如果您要在代码中的其他部分添加其他内联css，则会遇到问题，因为在还原更改时，将删除所有内联样式。使用jQuery，它更容易，更容易出错。

我想在另一个div中做一个特定的鼠标悬停效果

1 个答案: