hover失效的原因

最新推荐文章于 2023-10-10 23:24:39 发布
最新推荐文章于 2023-10-10 23:24:39 发布
阅读量713 收藏
点赞数 1
分类专栏： CSS 文章标签： :hover CSS

首先先确定是否是优先级出了问题：

    CSS权重：

           标签选择器：1；CLASS选择器：10；ID选择器：100；行间样式：1000；

举例： 

    .wrap a{} --- 权重为 10 + 1 = 11；其他同理。要注意行间样式，写了行间样式就要注意权重的问题，权重较大，如果一定要写行间样式，就在CSS中要生效的属性上加  !important；

还有:hover一定要写在:link ,:visited 之后，:active之前。

以上是网络搜集以及参考其他大佬答案解决问题之后的总结

Macelly
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS hover不起作用的原因
12-11
css 中有个奇怪的问题: 在使用 link的时候，要使用如下顺序，否则hover则没有任何效果 a:link a:visited a:hover a:active
ie6不兼容hover ie6 a hover属性失效解决办法
09-25
ie6 a hover不起作用已经是众所周知的了，网上也有大量于此相关的文章，看了一下吗把自己的总结写了出来，感兴趣的朋友可以了解下，或许对你学习浏览器兼容会有很多的帮助，话不多说切入正题
vue中使用hover选择器无效
世界第一开发的博客
12-03 1720
开头点题，先说结论，父组件z-index为负，鼠标根本无法位于组件上。 心情复杂，特地来给兄弟们讲个笑话，开心一下。 事情是这样的，今天想实现个很简单的功能，鼠标移上去会根据组件类型变色给用户一定提示的那种，使用css的hover选择器，很简单就可以实现了，拿出键盘，哐哐一顿操作，完成。代码大概就是这么简单 .taskAction i:hover{ color:red; } 结果，项目运行起来完全没有任何提示效果，我懵了，代码过于简单，完全不知道该从哪下手解决，百度谷歌一通操作，结果大概是冒号后空
CSS hover 不生效的原因
coycleipenghui的专栏
09-06 9526
遇到hover不生效的情况可以检查以下方面： 1，代码中类名是否写正确，这是最基础的情况，有时候会因为粗心或者代码量过多导致敲错类名或者引用错误类名； 2，检查hover控制的层级关系是否正确，通常来讲如果直接通过 hover .类名的方式来控制的话，需要满足被控制对象是触发对象的子元素。若要跨层级进行控制可阅读这篇文章 3，注意冒号hover中不要空格，应该连在一起否则也会导致不生效。即:hover，而不是: hover。 ...
hover出不来是什么原因css,关于css的:hover失效问题
weixin_39867509的博客
08-03 1655
参考：********************************我是分割线*******************************************************************************************1、网上百度的原因一般有如下几种种，第一种是：选择器、：、hover之间有空格，或者冒号是中文符号；第二种是：没有注意active，vis...
html中hover无法触发,CSS hover失效的原因总结
weixin_33585909的博客
06-15 2906
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？最近碰到了一个设置h标签的hover失效问题，找了些资料，趁此机会做个总结在 CSS 定义中，它们同时存在的时候,a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。,即visitied / link> hover > active ****在 CSS 定义中，它们同时存在的时...
html中鼠标悬停样式不触发,关于CSS中hover失效的几个原因
weixin_39612122的博客
06-03 3324
在设置CSS的hover时，有时会发现hover不起作用，总结一下原因：提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。1.在设置:hover前加空格：比如.one {margin: 0 auto;width: 400px;height: 300p...
IE6下伪类hover失效问题及解决办法
12-13
在处理CSS的机制上，拿对伪类:hover的支持来说，IE7+添加了对a以外其它标签的支持，但在IE6下:hover就连对a的支持都不是那么的尽如人意。有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常...
解决css中hover做遮盖罩闪动问题(推荐)
09-24
首先，问题的根源在于当鼠标移动到`div2`上时，`div3`作为遮盖罩出现，但因为`div3`现在位于鼠标下方，鼠标离开`div2`进入`div3`，导致`div2:hover`状态失效，`div3`消失，鼠标再回到`div2`上，如此循环，造成闪烁...
Google Chrome浏览器无法显示hover样式的解决方法
09-25
/* 不推荐的写法，可能导致Chrome hover样式失效 */ a:hover { display: block; /* 删除这一行 */ background-color: red; } /* 推荐的替代写法，使用Flexbox */ .container { display: flex; } a { flex: 1; ...
hover不生效没有效果的解决办法
lishuaihao的博客
10-11 2242
css的hover易错点当hover后面跟的是兄弟元素的时候一定要加+号当hover后面跟的是儿子元素的时候则不需要加 当hover后面跟的是兄弟元素的时候一定要加+号 当hover后面跟的是兄弟元素的时候一定要加+号 我花了好几分钟以为是代码写错了，一直不出效果，谁知道没有加+号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
hover失效的几种原因与z-index失效原因
weixin_44164982的博客
07-08 1768
今天检查自己写的小米官网，发现轮播图上的左右按钮的不知什么时候hover竟然失效了。然后检查了类名，样式，没发现问题。最后查阅了资料，发现常见的有以下原因 :hover前加了空格或使用了中文冒号 active，visited，hover，link之间的关系 active < hover < visitied / link其意思就是active需定义在hover之后才能起作用，而hover需定义在visited和link之后才会起作用。当然，前提是它们同时存在的时候。 就是我之前总结过的hove
hover失效问题
mhc20201554114的博客
05-14 1602
项目场景： 昨天在给学弟考核的时候，他的页面出现了一点小问题，就是某一个input框的hover在执行完点击事件之后，就失效了。 问题描述 他出问题部分的html代码如下 <input type="text" id="inputOne" value="搜索" name="keyword" autocomplete="off"> css代码如下 input { height: 45px; width: 245px; outline: none; border
CSS中id选择器hover
最新发布
m0_62708057的博客
10-10 62
<span class="bianse">要求1</span></td></tr><body><h2 class="mytext">学生信息注册</h2>要求：设置鼠标悬停、点击和释放间，元素成为焦点后不同背输入框背景颜色。<td>姓名：
css中hover没效果,我在段落中设置ID时，CSS：hover效果不起作用
weixin_29197835的博客
08-03 276
我有以下具有轻松效果的css3过渡：HTMLCSS* {padding: 0;margin: 0;}.button {width: 180px;margin-top: 45px;}.button a {display: block;height: 40px;width: 180px;/*TYPE*/color: black;font: 17px/50px Helvetica, Verdana, s...
Css中类、id应用hover动作详解
weixin_30634661的博客
08-18 282
Hover对于我们太熟悉了，其早期只定义于文本超链接鼠标移动上方样式。 慢慢的IE7、IE8.0\、IE9.0等火狐、谷歌浏览器面试，hover也渐渐被业界应用于更多领域。 比如： CSS Code复制内容到剪贴板 .Mylcass{padding:5px 5px; background:#f60} .Myclss:hover{ background:#000} ...
:hover伪类失效原因总结
weixin_60285052的博客
11-19 1524
失效
CSS鼠标动作的五种状态[伪类选择器]
weixin_45203607的博客
04-30 1万+
title: CSS鼠标动作的五种状态[UI元素的伪类选择器] abbrlink: 29618 date: 2020-07-08 12:20:16 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 初始状态link,点击后visited,鼠标悬浮hover,点击后未释放状态active,鼠标聚焦focus,案例实现自定义下内容 tags: CSS .
关于CSS中hover失效的几个原因
热门推荐
Xiaosang's blog
02-26 4万+
在设置CSS的hover时，有时会发现hover不起作用，总结一下原因： 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 1.在设置:hover前加空格： 比如 .one { margin: 0 auto; wid
hover-class
09-14
另外，如果在组件中已经指定了其他可能与hover-class冲突的类，那么hover-class将失效。为了避免这种冲突，可以将hover-class指定的类放在对应wss文件的最末尾，这样就不会被其他类所覆盖。在某些场景下，如果需要在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值