js onmouseover change css

Question

マウスのホバーで「リンク」またはメニューを作成するにはどうしたらいいですか？ だから、あなたがマウスを動かすと、CSS /メニューは "class"アクティブに変わるはずです。あなたのアクティブなクラスだけで、今すぐアクティブクラス

a:hover, active{ 
    color:red; 
} 

前にセレクタa:hoverを追加しているあなたは、リンクを置くたびに、アクティブクラスの効果がありますどのような

Answer 1

あなたは純粋なJavaScriptやjQueryの

jQueryを使って行うことができます。

<a href="#" class="myLink"></a> 

$(".myLink").hover(function() { 
    $(this).addClass("active"); 
}, 

// mouse out 
function() { 
    $(this).removeClass("active"); 
}); 

ピュアJavaScriptを：

var links = document.getElementsByTagName("a"); 

for (var i = 0; i < links.length; i++) { 
    var link = links[i], 
    classes = link.getAttribute("class"); 

    if (classes.indexOf("myLink") > -1) { 
     link.onmouseover = function() { 
      this.setAttribute("class", classes + " active"); 
     } 
     // Remove active class 
     link.onmouseout = function() { 
      this.setAttribute("class", classes); 
     } 
    } 
} 

Answer 2

。

a:hover, active{ 
 
    color:red; 
 
}

<a href='#'>Link</a>

更新

あなたがリンクのホバー上のクラスを追加したい場合は、この方法を行うことができ、純粋なJavaScriptで

var links = document.querySelectorAll('a'); 
 

 
links.forEach(function(link){ 
 
    link.addEventListener('mouseenter',function(){ 
 
     this.classList.add('active'); 
 
    }) 
 
});

<a href="#">Link</a>

Answer 3

CSSとHTML：

li 
 
{ 
 
    display : inline-block; 
 
    padding: 10px; 
 
    background : blue; 
 
} 
 

 
li:hover 
 
{ 
 
    background : #4286f4; 
 
}

<ul style="list-style:none;color:white;" > 
 
<li> 
 
item1 
 
</li> 
 
<li> 
 
    item2 
 
</li> 
 
<li> 
 
    item2 
 
</li> 
 
</ul>

CSSのホバーセレクタを使用しましたが、ユーザーがli要素の上を移動すると背景が変わります。 inline-blockを使用して、すべてのli要素が並べて表示されるようにしました。