在列表中淡出兄弟（非jQuery）

我創建了一個腳本來在列表中的一個元素懸停時淡出列表中的所有項目。在列表中淡出兄弟（非jQuery）

我已經完成了它的工作 - 但列表中的最後一項不會淡入（當列表中的最後一個項目被徘徊時，所有項目都會褪色） - 列表的其餘部分雖然可以正常工作。

我的腳本是在這裏 -

var activeItems = document.querySelectorAll('.item'); 

    for (i = 0; i < activeItems.length; i++) { 
    activeItems[i].addEventListener("mouseover", fadeOutItems, false); 

    activeItems[i].addEventListener("mouseout", resetListStyles, false); 

    function fadeOutItems() { 
     for (i = 0; i < activeItems.length; i++) { 
      this.setAttribute("class", "item fade-in"); 
      activeItems[i].setAttribute("class", "item fade-out"); 
     } 
    } 

    function resetListStyles() { 
     for (i = 0; i < activeItems.length; i++) { 
      activeItems[i].setAttribute("class", "item"); 
     } 
    } 

}

並創建了一個小提琴在這裏 -

https://jsfiddle.net/1opq1eyj/1/

上我要去哪裏錯了任何意見，將不勝感激。

同樣會感謝任何關於如何改進腳本的建議。

感謝，

來源

2017-03-06 Jon K

，就把這行 'this.setAttribute（「類」，「項淡入」）;'在循環之後 –

你有錯訂購

首先，你應該取消所有的，然後你應該讓this.setAttribute

function fadeOutItems() { 
     for (i = 0; i < activeItems.length; i++) { 
      activeItems[i].setAttribute("class", "item fade-out"); 
      this.setAttribute("class", "item fade-in"); 
     } 
    }

更新link

來源

2017-03-06 12:44:11

非常棒。謝謝Özgür！ –

如前所述，淡入屬性每次在循環內設置。對於最後一個項目，這意味着activeItems [i]將覆蓋最後一個課程設置。「淡入」設置可放置在循環之外。

function fadeOutItems() { 
     for (i = 0; i < activeItems.length; i++) { 
      activeItems[i].setAttribute("class", "item fade-out"); 
     } 
     this.setAttribute("class", "item fade-in"); 
    }

至於可能的替代方案。這也可以用純CSS來實現與單個選擇：

.item-list:hover > .item:not(:hover) { 
     opacity: 0.6; 
    }

這將不透明度設置爲所有.item S中.item-list DIV中，除了一個正在徘徊。 fiddle Option 1

然而，由於容器的寬度爲100％，其效果可以觸發有些很快，（取決於總佈局）。爲了安全起見，只要其中一個子項目被JS懸停（只要CSS父級選擇器不在基本支持範圍內）並將該CSS基於該類別，就可以向該容器添加額外的類： JS ：

let activeItems = document.querySelectorAll('.item'), 
    itemList = document.querySelector('.item-list'); 

for (i = 0; i < activeItems.length; i++) { 
    activeItems[i].addEventListener("mouseover", function(){itemList.classList.add('fade');}, false); 
    activeItems[i].addEventListener("mouseout", function(){itemList.classList.remove('fade');}, false); 
}

CSS：

.fade:hover > .item:not(:hover) { 
     opacity: 0.6; 
}

Fiddle option 2

來源

2017-03-06 13:21:05

在列表中淡出兄弟（非jQuery）

回答

相關問題