如果你的hover事件和click事件的样式不同,如元素背景本来是#fff,如果hover时背景是#ddd,点击时背景是#aaa,那么问题是当你点击后,鼠标再移动到这个元素时背景会变成#ddd,而你希望保持#aaa。

方法1:

var styleObj= document.styleSheets[0].cssRules[0].style;
styleObj.removeProperty('color');
styleSheets表示样式表
cssRules表示样式表里的样式
此方法需要知道hover事件在样式表中的顺序
不推荐
方法2:

.nav ul li:hover{
background: #ddd;
}

.active{
background: url('images/ico.gif') no-repeat center bottom;
background-color: #aaa;
color: #000!important;
}
.active:hover{
background: url('images/ico.gif') no-repeat center bottom!important;
background-color: #aaa!important;
color: #000!important;
}

 

hover与click样式冲突的更多相关文章

  1. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  2. SharePoint 2010 中使用Ztree和EasyUI样式冲突问题

    <style type="text/css"> /*解决ztree和SharePoint样式冲突问题*/ .ztree li a { display: inline-b ...

  3. jquery href属性和click事件冲突

    a标签的定义如下: <a href="javascript:void(0);">test</a> jquery中的click事件: $("a&qu ...

  4. css 样式冲突问题

    CSS 样式冲突问题 问题: 当文件中样式名称相同时,易出现样式冲突问题,解决办法如下: 解决: 以 layer.js 中弹出层  .layui-layer-page .layui-layer-con ...

  5. css样式冲突怎么解决?

    一个网页有时会使用两种CSS,那发生css样式冲突要怎么解决?下面本篇文章就来给大家介绍一下发生css样式冲突的解决方法,希望对大家有所帮助. css冲突怎么解决? 解决方法有很多,如果可以对html ...

  6. react 样式冲突解决方案 styled-components

    前置 在 react 中解决组件样式冲突的方案中,如果您喜欢将 css 与 js 分离,可能更习惯于 CSS-Modules:如果习惯了 Vue.js 那样的单文件组件,可能习惯于使用 styled- ...

  7. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  8. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  9. blur和click事件冲突

    一.问题描述文本框的blur事件和div元素的click事件出现冲突.在input的blur事件中,我们隐藏div元素.在div的click事件中,我们清除input的内容,并隐藏自身.当我们在inp ...

随机推荐

  1. 201521123008《Java程序设计》第八周实验总结

    1. 本周学习总结 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致有些元素没有删 ...

  2. 201521123029《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 答: 2. 书面作业 本次作业题集集合 1.List中指定元素的删除( ...

  3. 201521123001《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 答: 大多数情况下,从性能上来说ArrayList最好,但是当集合内的元素需要频繁插入.删除时Lin ...

  4. 201521123061 《Java程序设计》第五周学习总结

    201521123061 <Java程序设计>第五周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1.代 ...

  5. 201521123010 《Java程序设计》第4周学习总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 这周上课主要学了继承,在打代码的时候对各个关键字(除了super关键字)的用法有一点混乱.对多 ...

  6. 201521123067 《Java程序设计》第4周学习总结

    201521123067 <Java程序设计>第4周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ●总结: (1)在 ...

  7. 201521123011 《Java程序设计》 第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  8. 201521123052《Java程序设计》第2周学习总结

    1. 本周学习总结 String类一些用法 学习Array类 使用枚举 使用eclipse关联JDK源代码 使用码云管理云代码 2.书面作业 1.使用Eclipse关联jdk源代码,并查看String ...

  9. 201521123023《Java程序设计》第13周学习总结

    1. 本周学习总结 (1)网络中为了进行数据交换(通信)而建立的规则.标准或约定(=语义+语法+规则)称之为协议(常用http/ftp) (2)大致熟悉了TCP协议,但是UDP怎么辣么蓝,好理解却用不 ...

  10. 201521123081《Java程序设计》 第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 参考资料:XMIND 2. 书面作业 本次PTA作业题集 异常 常用异常 Q1. 题目5-1 1.1 截图你的提交结 ...