Question

如何使用鼠标悬停创建“链接”或菜单。因此，当您将鼠标悬停在css / menu上时，应该更改为“class”激活。

Answer 1

您可以使用纯JavaScript或jQuery

JQuery的：

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

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

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

Pure 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

CSS和HTML：

＆＃13;

li
{
  display : inline-block;
  padding: 10px;
  background : blue;
}

li:hover
{
  background : #4286f4;
}

＆＃13;

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

＆＃13;

我使用CSS的悬停选择器，当用户将鼠标悬停在li元素上时，这会更改背景。我使用inline-block以便所有li元素并排显示

Answer 3

无论您的活动类是什么，只需在活动类

之前添加选择器a:hover

a:hover, active{
    color:red;
 }

现在，无论何时悬停链接，都会产生活动类的效果。

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>

js onmouseover改变css

3 个答案: