Question

.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时，我希望icon-change的颜色为“粉红色”，直到我重新点击课程icon-change为止。在这个重新点击的时刻，重新点击的课程icon-change将返回到第一个状态，就像还没有发生任何事情一样。

我怎么能通过jQuery做到这一点？

Answer 1

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

＆＃13;

$('.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");
});

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

检查控制台。

Answer 3

继续使用css，只需添加一个类似于＆＃39; select＆＃39;使用background-color: pink并点击

进行切换

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

Answer 4

你使用这种方法来实现

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

同样可以使用其他方法。

Answer 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;
    }
    
  });

如何只使用jquery对类进行css效果？

5 个答案: