我想請求你的幫助。這就是我想要做的。
我有六個專案的網格。我想讓第一個專案默認激活，當用戶將滑鼠移動到五個剩余網格專案之一上時，該類將從第一個專案中洗掉并應用當前選定的專案。一旦沒有游標在其上的物件。該類將再次自動應用于第一個元素。
const cards = document.querySelectorAll('.card');
function cardSelect() {
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.add('active');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('active');
});
//If there's no actived element, then apply active class to the first item
if (!card.classList.contains('active')) {
cards[0].classList.add('active');
//If there's any actived element, then remove the active class from the first item
} else {
cards[0].classList.remove('active');
}
})
}
cardSelect();.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
grid-template-areas: "item1 item2 item3" "item4 item5 item6";
}
/* line 1152, ../../PCX/sass/scss/style.scss */
.grid .card {
color: #fff;
font-size: 2rem;
background-color: #0077ff;
display: flex;
align-items: center;
justify-content: center;
}
/* line 1160, ../../PCX/sass/scss/style.scss */
.grid .card.active {
background-color: #0000ee;
}
/* line 1164, ../../PCX/sass/scss/style.scss */
.grid .item1 {
grid-area: item1;
}
/* line 1167, ../../PCX/sass/scss/style.scss */
.grid .item2 {
grid-area: item2;
}
/* line 1170, ../../PCX/sass/scss/style.scss */
.grid .item3 {
grid-area: item3;
}
/* line 1173, ../../PCX/sass/scss/style.scss */
.grid .item4 {
grid-area: item4;
}
/* line 1176, ../../PCX/sass/scss/style.scss */
.grid .item5 {
grid-area: item5;
}
/* line 1179, ../../PCX/sass/scss/style.scss */
.grid .item6 {
grid-area: item6;
}<div class="grid">
<div class="item1 card">ITEM 1</div>
<div class="item2 card">ITEM 2</div>
<div class="item3 card">ITEM 3</div>
<div class="item4 card">ITEM 4</div>
<div class="item5 card">ITEM 5</div>
<div class="item6 card">ITEM 6</div>
</div>你們能幫我一把嗎？這是一個邏輯問題，缺乏js知識。
uj5u.com熱心網友回復：
我認為，每當游標進入或離開卡片時，您都可以將它們全部清除（我將其放入一個函式中）。
如果它進入了一張卡片，則將活動類添加到這張卡片上。
如果它留下一張牌，則將活動類別設定為第一張牌。
const cards = document.querySelectorAll('.card');
cards[0].classList.add('active');
function clearAll() {
cards.forEach(card => card.classList.remove('active'));
}
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
clearAll();
card.classList.add('active');
});
card.addEventListener('mouseleave', () => {
clearAll()
cards[0].classList.add('active');
});
}).grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
grid-template-areas: "item1 item2 item3" "item4 item5 item6";
}
/* line 1152, ../../PCX/sass/scss/style.scss */
.grid .card {
color: #fff;
font-size: 2rem;
background-color: #0077ff;
display: flex;
align-items: center;
justify-content: center;
}
/* line 1160, ../../PCX/sass/scss/style.scss */
.grid .card.active {
background-color: #0000ee;
}
/* line 1164, ../../PCX/sass/scss/style.scss */
.grid .item1 {
grid-area: item1;
}
/* line 1167, ../../PCX/sass/scss/style.scss */
.grid .item2 {
grid-area: item2;
}
/* line 1170, ../../PCX/sass/scss/style.scss */
.grid .item3 {
grid-area: item3;
}
/* line 1173, ../../PCX/sass/scss/style.scss */
.grid .item4 {
grid-area: item4;
}
/* line 1176, ../../PCX/sass/scss/style.scss */
.grid .item5 {
grid-area: item5;
}
/* line 1179, ../../PCX/sass/scss/style.scss */
.grid .item6 {
grid-area: item6;
}<div class="grid">
<div class="item1 card">ITEM 1</div>
<div class="item2 card">ITEM 2</div>
<div class="item3 card">ITEM 3</div>
<div class="item4 card">ITEM 4</div>
<div class="item5 card">ITEM 5</div>
<div class="item6 card">ITEM 6</div>
</div>uj5u.com熱心網友回復：
好訊息是你不需要 JavaScript 來做到這一點 - CSS 會做到這一點（見代碼注釋）
/* no js needed */.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
/*
You don't need grid areas for this layout :-)
*/
}
/*
The trick
if you are not hovering the grid .grid:not(:hover)
then set the active color on .item1.card
if you are hovering a card .card:hover set the active
color on that
when you are hovering a card you are also hovering the
grid why the item1.card will turn back to normal...
unless you hover it – then it uses the .card:hover rule
I hope it made sense :-)
*/
.grid:not(:hover) .item1.card,
.card:hover {
background-color: #0000ee;
}
.card {
color: #fff;
font-size: 2rem;
background-color: #0077ff;
display: flex;
align-items: center;
justify-content: center;
}<div class="grid">
<div class="item1 card">ITEM 1</div>
<div class="item2 card">ITEM 2</div>
<div class="item3 card">ITEM 3</div>
<div class="item4 card">ITEM 4</div>
<div class="item5 card">ITEM 5</div>
<div class="item6 card">ITEM 6</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/378063.html
標籤：javascript html 查询 css