请问各位大神怎样解决这个问题。感谢！

Question

点击这个按钮时，改变成另外一种效果，这些都能实现，但问题来了。因为点击的时候也算是触碰所以离开后还是会受hover的影响，导致鼠标离开后，点击后的效果没了，我需要保留这个效果，跟滴滴官网http://static.udache.com/gulfstream/webapp/pages/udache-driver-pc.html请问各位大神怎样解决这个问题。感谢！

Answer 1

加个变量持久化一下呗。每个图标加一个selected变量，被点击了就把这个图标的selected设置为true，四个图标的selected只有一个是true，然后根据这个属性来给图标加选中样式。

Answer 2

可以给每个图标加上一个开关，点击后，点击的那个图标的开关就为false，其它的就为true。然后在hover里面做个判断，如果开关是false，鼠标移出时就不变，如果是true，鼠标移出时就变灰

Answer 3

点击后和hover的效果应该是一样的
点击的时候处理一下就好了比如:

.nav li.active,.nav li:hover{//高亮}

$(".nav li").click(function(){
    $(this).addClass("active").siblings("li").removeClass("active");
});

Answer 4

其实就是轮播图下面的小点点换成制订的icon

Answer 5

其實可以純 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 type="radio" id="one"><label for="one"></label>

當 input 的 id 和 label 的 for 相符時，點擊 label 等同於點擊 radio
這時就可以在 label 裡面放 icon ，實現自定義 radio 外觀的效果。

Answer 6

https://segmentfault.com/q/1010000005900910?_ea=946813 你看是这样的效果吗？把hover事件换成click事件。

Answer 7

很好解决
在写css样式的时候，比如
div img:hover{background:red}在后面再加一句
div img.hover{background:red}
意思是这个元素的class="hover"的时候 也长这样
只要在hover了之后，addClass('hover')

Answer 8

下面是滴滴官网的代码，每当图片激活时，会加上active的Class，使样式变化。

<p id="icon_outer" class="overflow-hid ie_btn_hide" style="margin-top:40px;">
    <a class="mess_icon_driver icon_a"></a>
    <a class="mess_icon_driver icon_b active"></a>
    <a class="mess_icon_driver icon_c"></a>
    <a class="mess_icon_driver icon_d"></a>
</p>

Answer 9

点击当前添加一个样式CLASS，hover事件中添加一条判断，判断是否有这个class即可