我想在另一个 div 中做一个特定的鼠标悬停效果
i would like to do a specific mouse hovering effect in another div
自 2 周以来,我一直在使用鼠标悬停效果的页面上工作,现在我在 html 和 css 中创建了 3 个鼠标悬停图像,我想一种新效果,类似于 "hovered" 对象的焦点,例如:
如果我将鼠标悬停在 div 1 上,页面的不透明度将大大降低,主要是我添加低 "opacity effects".
背景色的地方
这里的问题是我不知道该怎么做,我试过了
.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>
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 它更容易并且更不易出错。
自 2 周以来,我一直在使用鼠标悬停效果的页面上工作,现在我在 html 和 css 中创建了 3 个鼠标悬停图像,我想一种新效果,类似于 "hovered" 对象的焦点,例如:
如果我将鼠标悬停在 div 1 上,页面的不透明度将大大降低,主要是我添加低 "opacity effects".
背景色的地方这里的问题是我不知道该怎么做,我试过了
.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>
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 它更容易并且更不易出错。