我有一堆具有相同類名的 div，我希望當我將滑鼠懸停在其中一個 div 上時更改其背景顏色，但是當我將滑鼠懸停在一個 div 上時，所有其他 div 也會更改。
我嘗試將節點串列轉換為陣列，然后回圈遍歷該陣列，但它仍然不起作用。
這就是我所擁有的，請幫助我改進它或向我展示另一種實作目標的方法
我會使用 CSS.card-content:hover:{display:flex}但原始顯示設定為無所以沒有什么可以懸停
function showContent() {
const card = document.querySelectorAll('.card-content');
// for (let i = 0; i < card.length; i ) {
// card[i].classList.toggle("show")
// }
// // this.style.display= "flex";
// for (const show of card) {
// console.log(show)
// }
// let cards = [card]
// console.log(cards)
var arr = [];
for(var i = card.length; i--; arr.unshift(card[i]));
// console.log(arr)
for (let j = 0; j < arr.length; j ) {
const show = arr[j];
show.style.display= "flex";
}
}.project.container{
width: 60%;
display: flex;
background-color: black;
padding: 2vw 5vw;
justify-content: space-between;
flex-wrap: wrap;
}
.project .project_card {
width: calc(50% - 2vw);
margin: 1vw 1vw;
text-align: center;
height: 200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: violet;
}
.project .project_card.card1{
background-image: url('../thumbs/dwyw.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.project .project_card.card2{
background-image: url('../thumbs/courselist.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.project .project_card.card3{
background-image: url('../thumbs/iqoption.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.project .project_card.card4{
background-image: url('../thumbs/slider.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.project .project_card .card-content{
background-color: #898987fa;
height: 200px;
width: 100%;
padding: 2vw;
flex-direction: column;
align-items: center;
justify-content: center;
display: none;
}
.show{
display: flex;
}
.project .project_card .card-content a{
background: linear-gradient(to right, #242424b0,#000000c0);
padding: 1vw 2vw;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
position: relative;
font-weight: 700;
font-size: 1.2vw;
transition: all 0.5s;
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
-webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
-moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
}
.project .project_card .card-content a:hover{
background: linear-gradient(to right, #000000c0, #242424b0);
}<div class="project container">
<div class="project_card card1" onmouseover="showContent()">
<div class="card-content">
<h3 class="name">{%NAME%}</h3>
<p class="desc">{
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371871.html
標籤：javascript html css