マウスのホバークラスを使用して子idsを有効にする

マウスオーバーエフェクトを使用してクラスnavButtonsの中にすべてのidsのエフェクトを作成しようとしています。ここでは、forループを使ってこれを行うことができますが、idの名前を変更する必要があります。名前を変更せずにこれを行う方法はありますか？マウスのホバークラスを使用して子idsを有効にする

document.getElementsByClassName("navButtons").addEventListener("mouseover", mouseOver); 
 
document.getElementsByClassName("navButtons").addEventListener("mouseout", mouseOut); 
 

 
function mouseOver() { 
 
    document.getElementsByClassName("navButtons").style.color = "red"; 
 
} 
 

 
function mouseOut() { 
 
    document.getElementsByClassName("navButtons").style.color = "black"; 
 
}

<nav> 
 
    <div class="navButtons"> 
 
     <div id="about">about</div> 
 
     <div id="portfolio">portfolio</div> 
 
     <div id="contact">contact</div> 
 
    </div> 
 
</nav>

出典

2017-07-09 wallcrawlish

あなただけ.navButtons div要素内のすべてのdivにホバー効果を追加するためにCSSを使用することができます。

.navButtons div{ 
 
\t color: red; 
 
} 
 
.navButtons div:hover{ 
 
\t color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Hover effect</title> 
 
</head> 
 
<body> 
 
<nav> 
 
    <div class="navButtons"> 
 
     <div id="about">about</div> 
 
     <div id="portfolio">portfolio</div> 
 
     <div id="contact">contact</div> 
 
    </div> 
 
</nav> 
 
</body> 
 
</html>

出典

2017-07-09 14:15:58 azs06

ha！私はjavascriptでこれを行う方法について何かを見つけることができなかったのも不思議ではありませんありがとうございます。 – wallcrawlish

私が正しくあなたを理解していた場合、あなたはnavButtonsをホバリング時にnavButtons内のすべての要素にスタイルを適用したいです。これはCSSでのみ行うことができます。

.navButtons:hover > div { 
 
    color: red; 
 
}

<nav> 
 
    <div class="navButtons"> 
 
     <div id="about">about</div> 
 
     <div id="portfolio">portfolio</div> 
 
     <div id="contact">contact</div> 
 
    </div> 
 
</nav>

あなたはしかし、何らかの理由で、（この目的のために推奨されていない）代わりにJavascriptを使用したい場合は、次の操作を行うことができます

var navButtons = document.getElementsByClassName('navButtons')[0]; 
 
var children = navButtons.getElementsByTagName('div'); 
 
    
 
navButtons.addEventListener('mouseenter', function() { 
 
    for (var i = 0; i < children.length; i++) { 
 
    children[i].style.color = 'red'; 
 
    } 
 
}); 
 

 
navButtons.addEventListener('mouseleave', function() { 
 
    for (var i = 0; i < children.length; i++) { 
 
    children[i].style.color = 'black'; 
 
    } 
 
});

<nav> 
 
    <div class="navButtons"> 
 
     <div id="about">about</div> 
 
     <div id="portfolio">portfolio</div> 
 
     <div id="contact">contact</div> 
 
    </div> 
 
</nav>

出典

2017-07-09 14:18:52

document.getElementsByClassName("navButtons").addEventListener("mouseover", mouseOver); イベントリスナーをノードリストに追加する場合は、ループ内で各ノードをリスト内にアタッチする必要があります。 event.targetを使用してmouseOver()関数内の現在の要素にアクセスできます。

var navButtons = document.getElementsByClassName("navButtons"); 
 
for (var i=0; i<navButtons.length; i++){ 
 
    navButtons[i].addEventListener("mouseover", mouseOver); 
 
    navButtons[i].addEventListener("mouseout", mouseOut); 
 
} 
 
function mouseOver(event) { 
 
    event.target.parentNode.style.color = "red"; 
 
} 
 

 
function mouseOut(event) { 
 
    event.target.parentNode.style.color = "black"; 
 
}

<nav> 
 
    <div class="navButtons"> 
 
     <div id="about">about</div> 
 
     <div id="portfolio">portfolio</div> 
 
     <div id="contact">contact</div> 
 
    </div> 
 
</nav>

出典

2017-07-09 14:19:09 Dij

あなたは

var c = document.getElementById("navButtons").children;

cは今アレイである。この方法により、クラスのすべての子を得ることができます。したがって、この配列を繰り返し処理することで、各子との接触が可能になります、つまりc[0]が最初の要素です

出典

2017-07-09 14:21:05

マウスのホバークラスを使用して子idsを有効にする

答えて

関連する問題