84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
点击这个按钮时，改变成另外一种效果，这些都能实现，但问题来了。因为点击的时候也算是触碰所以离开后还是会受hover的影响，导致鼠标离开后，点击后的效果没了，我需要保留这个效果，跟滴滴官网http://static.udache.com/gulfstream/webapp/pages/udache-driver-pc.html请问各位大神怎样解决这个问题。感谢！
认证0级讲师
加个变量持久化一下呗。每个图标加一个selected变量，被点击了就把这个图标的selected设置为true，四个图标的selected只有一个是true，然后根据这个属性来给图标加选中样式。
可以给每个图标加上一个开关，点击后，点击的那个图标的开关就为false，其它的就为true。然后在hover里面做个判断，如果开关是false，鼠标移出时就不变，如果是true，鼠标移出时就变灰
点击后和hover的效果应该是一样的点击的时候处理一下就好了比如:
.nav li.active,.nav li:hover{//高亮}
$(".nav li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); });
其实就是轮播图下面的小点点换成制订的icon
其實可以純CSS解決，稍微寫了例子：
CSS
jsFiddle
重點在於這三行：
.icon > input[type="radio"] { display: none; /* 隱藏原本的 radio */ } .icon input[type="radio"]:checked ~ label { color: orange; /* 利用 ~ 選擇器，這裡的意思是 所有前面元素為input[type="radio"]:checked 的label元素 */ } .icon > label:hover { color: orange; /* 滑鼠移入移出效果 */ }
主要是利用input和label的神奇配合效果：
input
label
當input的id和label的for相符時，點擊label等同於點擊radio這時就可以在label裡面放icon，實現自定義radio外觀的效果。
id
for
radio
icon
https://segmentfault.com/q/1010000005900910?_ea=946813 你看是这样的效果吗？把hover事件换成click事件。
很好解决在写css样式的时候，比如p img:hover{background:red}在后面再加一句p img.hover{background:red}意思是这个元素的class="hover"的时候 也长这样只要在hover了之后，addClass('hover')
下面是滴滴官网的代码，每当图片激活时，会加上active的Class，使样式变化。
active
Class
点击当前添加一个样式CLASS，hover事件中添加一条判断，判断是否有这个class即可
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
加个变量持久化一下呗。每个图标加一个selected变量，被点击了就把这个图标的selected设置为true，四个图标的selected只有一个是true，然后根据这个属性来给图标加选中样式。
可以给每个图标加上一个开关，点击后，点击的那个图标的开关就为false，其它的就为true。然后在hover里面做个判断，如果开关是false，鼠标移出时就不变，如果是true，鼠标移出时就变灰
点击后和hover的效果应该是一样的
点击的时候处理一下就好了比如:
其实就是轮播图下面的小点点换成制订的icon
其實可以純
CSS解決，稍微寫了例子：jsFiddle
重點在於這三行：
主要是利用
input和label的神奇配合效果：當
input的id和label的for相符時，點擊label等同於點擊radio這時就可以在
label裡面放icon，實現自定義radio外觀的效果。https://segmentfault.com/q/1010000005900910?_ea=946813 你看是这样的效果吗？把hover事件换成click事件。
很好解决
在写css样式的时候，比如
p img:hover{background:red}在后面再加一句
p img.hover{background:red}
意思是这个元素的class="hover"的时候 也长这样
只要在hover了之后，addClass('hover')
下面是滴滴官网的代码，每当图片激活时，会加上
active的Class，使样式变化。点击当前添加一个样式CLASS，hover事件中添加一条判断，判断是否有这个class即可