[英]How can I combine these two functions into one?
我有一個帶圖像的 div 和一個帶文本的 div。 當我在圖像上 hover 時,它會改變灰度,並且將鼠標懸停在文本上會改變不透明度。 如何組合 js 代碼,以便將鼠標懸停在圖像或文本上,同時更改圖像的灰度和文本的不透明度?
<div class="images">
<img src="/photographs/FootballTeam.jpg" />
<div class="image_description">The team. 14/07/17</div>
</div>
var images = document.querySelectorAll("#photos > .images > img");
for (var i = 0; i < images.length; i++) {
images[i].style.transitionDuration = "0.1s";
images[i].addEventListener("mouseenter", function() {
if (this.style.filter === "grayscale(100%)") {
this.style.filter = "grayscale(0%)";
} else {
this.style.filter = "grayscale(100%)";
}
});
}
var images = document.querySelectorAll(
"#photos > .images > .image_description"
);
for (var i = 0; i < images.length; i++) {
images[i].style.transitionDuration = "0.1s";
images[i].addEventListener("mouseenter", function() {
if (this.style.opacity === "0") {
this.style.opacity = "1";
} else {
this.style.opacity = "0";
}
});
}
我希望你在這里有相同的圖像和與它們相對應的文本。 所以,只需嘗試下面的代碼並恢復 -
var images = document.querySelectorAll("#photos > .images > img");
var imagesWithDesc = document.querySelectorAll(
"#photos > .images > .image_description"
);
for (var i = 0; i < images.length; i++) {
images[i].style.transitionDuration = "0.1s";
images[i].addEventListener("mouseenter", function () {
if (this.style.filter === "grayscale(100%)") {
this.style.filter = "grayscale(0%)";
} else {
this.style.filter = "grayscale(100%)";
}
});
imagesWithDesc[i].style.transitionDuration = "0.1s";
imagesWithDesc[i].addEventListener("mouseenter", function () {
if (this.style.opacity === "0") {
this.style.opacity = "1";
} else {
this.style.opacity = "0";
}
});
}
這是我的答案:
//Get all images containers
var images = document.querySelectorAll("#photos > .images");
//Loop every container
for (var i = 0; i < images.length; i++) {
//set variables for code readability
let container = images[i];
let description = self.querySelectorAll(".image_description")[0];
//set transition durations
container.style.transitionDuration = "1s";
description.style.transitionDuration = "1s";
//add mouse events
container.addEventListener("mouseenter", function() {
container.style.filter = "grayscale(100%)";
description.style.opacity = "0";
});
container.addEventListener("mouseleave", function() {
container.style.filter = "grayscale(0%)";
description.style.opacity = "1";
});
}
我建議對您的代碼進行以下更改:
var imageContainers = document.querySelectorAll("#photos > .images");
imageContainers.forEach(imageContainer => {
imageContainer.addEventListener('mouseenter', () => {
imageContainer.classList.toggle('grayscale')
});
})
然后,在您的 css 中:
#photos .images > * {
transition: 0.5s;
}
#photos .images > img {
filter: grayscale(0%);
}
#photos .images.grayscale > img {
filter: grayscale(100%);
}
#photos .images > .image_description {
opacity: 0;
}
#photos .images.grayscale > .image_description {
opacity: 1;
}
僅使用 CSS 會更好。 如果需要,還可以附加 hover 事件監聽器。
.images { position: relative; width: 500px; height: 300px; }.images img { width: 100%; height: 100%; /* Your properties */ transition: .25s; /*(.1s is too fast)*/ }.images.image_description { /* Get it to place */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 300px; /* Some style */ color: white; cursor: pointer; font-family: sans-serif; font-size: 28px; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0px 0px 5px black; /* Your properties */ opacity: 0; transition: .25s; } /* Image hover event */.images:hover img { filter: grayscale(1); } /* Description hover event */.images:hover.image_description { opacity: 1; }
<div class="images"> <img src="https://natgeo.imgix.net/factsheets/thumbnails/01-balance-of-nature.adapt.jpg"/> <div class="image_description">the nature</div> </div> I'm not owner of the image.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.