[英]How can i do this css effect on classes using only jquery?
.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>
我想要的是，如果element具有class icon-change类，则该类可以像我的css效果一样获得效果。
换句话说，我想知道的是，当鼠标放在该元素上或将鼠标悬停在该元素上时，如何更改该元素的背景颜色。
有关更多示例，
当鼠标在class icon-change类中时，我希望icon-change的背景色为“红色”。
当鼠标悬停在class icon-change类上时，我希望icon-change的颜色为'blue'。
当我在类icon-change上单击鼠标时，我希望icon-change的颜色为“粉红色”，直到我再次单击类icon-change为止。 在此重新单击的时刻，重新单击的类icon-change将恢复为拳头状态，就像什么都没有发生一样。
我如何通过jQuery做到这一点？
您可以使用。对（）见参考这里附加一个事件处理函数，然后使用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>
您可以通过jquery处理鼠标效果。
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
检查控制台。
继续使用CSS，只需添加background-color: pink “ selected”的类（ background-color: pink ，然后单击即可切换
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
你用这种方法来实现
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
同样，您可以使用其他方法。
尝试这个 ：
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的slideDown这样的下滑效果，但只使用CSS？
[英]How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?
如何重新创建此效果/过渡/动画？ （HTML / CSS / JQuery）
[英]How can I recreate this effect/transition/animation? (HTML/CSS/JQuery)
我如何通过使用HTML，CSS和JavaScript来实现这种效果（请参阅内部）？
[英]How can I do effect like this(see inside) by using HTML, CSS and JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.