如何仅使用 jquery 对类进行这种 css 效果？答案

【问题标题】：How can i do this css effect on classes using only jquery?如何仅使用 jquery 对类进行这种 css 效果？
【发布时间】：2017-11-07 16:21:32
【问题描述】：

.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
  background-color: #7F613F;
}

.icon-color {
  color: #282828;
}
.nav {
  display: flex;
}

@media (max-width: 768px) {
  .nav > li {
    float: left;
  }
}

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div class="navbar-header">

                        <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
                            <li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

我想要的是，如果元素有类icon-change，则该类可以产生类似于我的 css 效果的效果。

换句话说，我想知道的是，当鼠标在该元素上或鼠标悬停在该元素上时，如何更改该元素的背景颜色。

更多例子，

当鼠标在 icon-change 类中时，我希望 icon-change 的背景颜色为“红色”。
当鼠标悬停在班级icon-change 上时，我希望icon-change 的颜色为“蓝色”。

icon-change

我如何通过 jQuery 做到这一点？

【问题讨论】：

既然可以用 css 做，为什么还要用 jquery？
@guradio 虽然我只提到了类似css效果的背景颜色，但我实际上想用jQuery函数做其他事情，比如console.log或其他东西。
那么，当 mouse over 一个元素时，你想做什么？并在 mouse out 时撤消它...或者您更喜欢在 mouse enter 时做某事s 并在鼠标离开s 时撤消 ?
jquery 有 .css() 方法，但最好用于动态 css 操作。
所以，.on('mouseenter' 和 .on('mouseleave' ?

标签： javascript jquery html css

【解决方案1】：

您可以使用 .on() 参见参考 here 附加事件处理函数然后使用mouseenter - 当鼠标进入对象时使用 mouseeleave - 当鼠标离开对象时使用 click- 点击对象时使用

$('.icon-change').on('mouseenter',function(){
 $('.icon-change').css("background-color","red");
});
$('.icon-change').on('mouseleave',function(){
 $('.icon-change').css("background-color","blue");
})
$('.icon-change').on('click',function(){
 $('.icon-change').css("background-color","pink");
});

.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
  background-color: #7F613F;
}

.icon-color {
  color: #282828;
}
.nav {
  display: flex;
}

@media (max-width: 768px) {
  .nav > li {
    float: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div class="navbar-header">

                        <ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
                            <li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

【讨论】：

【解决方案2】：

继续使用 css，只需使用 background-color: pink 添加一个类似“selected”的类并在点击时切换它

$('.icon-change').click((e) => { e.target.toggleClass('selected'); }

【讨论】：

【解决方案3】：

您可以通过 jquery 处理鼠标效果。

$(selector).on('mouseover mouseleave', function(e){
  console.log(e.type)
})

检查控制台。

【讨论】：

【解决方案4】：

你用这个方法来实现

$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});

同样你可以使用其他方法。

【讨论】：

【解决方案5】：

试试这个：

var flag = true;
  $(".icon-change").mouseover(function(){
    if(flag) {
      $(".icon-color").css("color", "blue");
    }
  });
  $(".icon-change").mouseleave(function(){
    if(flag) {
      $(".icon-color").css("color", "#282828");
    }
  });
  
  $(".icon-change").click(function(){
    if(flag) {
      $(".icon-color").css("color", "pink");
      flag = false;
    } else {
      $(".icon-color").css("color", "#282828");
      flag = true;
    }
    
  });

【讨论】：