How can i do this css effect on classes using only jquery?
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>
What i want is that if element has class icon-change , that class can get effect something like my css effects.
In other words, What i want to know is how can i change that element's background color when mouse is on that element, or when mouse over that element.
For more example,
when mouse is in the class
icon-change, i wanticon-change's background color be 'red'.when mouse is over the class
icon-change, i wanticon-change's color be 'blue'.when i mouse click on the class
icon-change, i wanticon-change's color be 'pink', and it's last until i re-click the classicon-change. In this re-clicked moment, re-clicked classicon-changeis returned to fist status like there's nothing happened yet.
How can i do this through jQuery?
5 answers
solution1
3 ACCPTED 2017-11-07 08:20:43
You can use .on() see reference here to attach an event handler function then use mouseenter - use when mouse enter the object mouseeleave - use when mouse leave the object click - use when click on the object
$('.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>
solution2
1 2017-11-07 07:57:59
you can handle mouse effect via jquery.
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
check the console.
solution3
1 2017-11-07 07:58:38
继续使用CSS，只需添加background-color: pink “ selected”的类（ background-color: pink ，然后单击即可切换
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
solution4
1 2017-11-07 07:59:49
you use this methods to achieve
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
similarly you can use other methods.
solution5
1 2017-11-07 08:21:32
Try this :
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; } });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.