首頁猿問如何將 Javascript...

如何將 Javascript 鼠標懸停 css 效果應用于具有相同類名的所有元素？

JavaScript

白豬掌柜的 2023-05-19 16:01:52

img__text當用戶將鼠標懸停在上時，我想將不透明度增加到 1 text__container。text__container我已經嘗試通過嚴格的 CSS 來實現這一點，方法是像這樣影響孩子，#text__container ~ .img__text然后應用所需的 CSS 效果。索引.html<div class="gallery__container"> <div> <img class="gallery__img" src="./images/image1.png" alt=""> <div id="text__container"> <span class="img__text">Shake & Shot</span> </div> </div> <div> <img class="gallery__img" src="./images/image2.png" alt=""> <div id="text__container"> <span class="img__text">It's On</span> </div> </div> <div> <img class="gallery__img" src="./images/image3.png" alt=""> <div id="text__container"> <span class="img__text">Shake & Shot</span> </div> </div> <div> <img class="gallery__img" src="./images/image4.png" alt=""> <div id="text__container"> <span class="img__text">Shake & Shot</span> </div> </div> <div> <img class="gallery__img" src="./images/image5.png" alt=""> <div id="text__container"> <span class="img__text">Shake & Shot</span> </div> </div> <div> <img class="gallery__img" src="./images/image6.png" alt=""> <div id="text__container"> <span class="img__text">Shake & Shot</span> </div> </div></div>風格.scss//Gallery .gallery__container { margin-top: 5%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; div { background-color: #000; width: 49%; margin: 0 0 2% 0; height: 665px; display: grid; img { grid-column: 1; grid-row: 1; height: 100%; width: 100%; z-index: 1; align-content: center; transition: 0.8s ease-out; opacity: 1; &:hover { transition: 0.8s ease-in; cursor: pointer; opacity: 0.5; } }

查看完整描述

1 回答

開滿天機

TA貢獻1786條經驗獲得超13個贊

您有多個具有相同 id 的元素 - 將其更改為一個類。let如果你想分配事件，你的代碼也需要在循環中使用。終于不是mouseout了mouseleave。

這行得通。

var imgContainer = document.getElementsByClassName('text__container');

var imgText = document.getElementsByClassName('img__text');

for (let i = 0; i < imgText.length; i++) {

imgContainer[i].addEventListener('mouseover', function() {

imgText[i].style.opacity = "1";

imgText[i].style.transition = "0.8s ease-in";

});

imgContainer[i].addEventListener('mouseout', function(){

imgText[i].style.opacity = "0";

imgText[i].style.transition = "0.8s ease-out";

});

}

.gallery__container {

margin-top: 5%;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

div {

background-color: #000;

width: 49%;

margin: 0 0 2% 0;

height: 665px;

display: grid;

img {

grid-column: 1;

grid-row: 1;

height: 100%;

width: 100%;

z-index: 1;

align-content: center;

transition: 0.8s ease-out;

opacity: 1;

&:hover {

transition: 0.8s ease-in;

cursor: pointer;

opacity: 0.5;

}

.text__container {

border: 1px solid red;

text-align: center;

align-self: center;

grid-column: 1;

grid-row: 1;

background-color: rgba(0,0,0,0.5);

width: 100%;

height: 100%;

margin: 0;

z-index: 2;

background-color: transparent;

transition: 0.8s ease-out;

&:hover {

transition: 0.8s ease-in;

background-color: rgba(0,0,0,0.5);

}

.img__text {

border: 1px solid red;

text-align: center;

align-self: center;

z-index: 3;

color: #fff;

font-family: $main-font;

font-size: 2rem;

width: 50%;

margin: 0 auto;

transition: 0.8s ease-out;

opacity: 0;

}

<div>

<span class="img__text">Shake & Shot</span>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

反對回復 2023-05-19

1 回答
0 關注
142 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將 Javascript 鼠標懸停 css 效果應用于具有相同類名的所有元素？

如何將 Javascript 鼠標懸停 css 效果應用于具有相同類名的所有元素？

1 回答

添加回答

如何將 Javascript 鼠標懸停 css 效果應用于具有相同類名的所有元素？

如何將 Javascript 鼠標懸停 css 效果應用于具有相同類名的所有元素？