javascript - 请问各位大神怎样解决这个问题。感谢！-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

PHP中文网 2017-04-11 11:28:30

[JavaScript讨论组]

486

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

PHP中文网

认证0级讲师

全部回复(8)

PHPz2017-04-11 11:30:30 8楼

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

赞 +0

添加回复

大家讲道理2017-04-11 11:30:30 7楼

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

赞 +0

添加回复

PHP中文网2017-04-11 11:30:30 6楼

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

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

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

赞 +0

添加回复

PHP中文网2017-04-11 11:30:30 5楼

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

赞 +0

添加回复

黄舟2017-04-11 11:30:30 4楼

其實可以純 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 外觀的效果。

赞 +0

添加回复

大家讲道理2017-04-11 11:30:30 3楼

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

赞 +0

添加回复

天蓬老师2017-04-11 11:30:30 2楼

下面是滴滴官网的代码，每当图片激活时，会加上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>

赞 +0

添加回复