关于a标签的hover问题

今天写代码的时候发现一个问题

<a href="#"><span>你好</span>cici</a>

样式为这个

a:hover{color:blue;
}

这样写当鼠标悬浮的时候整个"你好cici"都变蓝,这没问题

但是当我的样式改为这样

span{color:red;
}
a:hover{color:blue;
}

当鼠标移上去的时候,只有"cici"是变蓝的,"你好"仍然是红色

那么也给span标签设置hover,样式改为

span{color:red;
}
a:hover span{color:blue;
}
a:hover{color:blue;
}

两个都变色,(strong等行内标签也是这样,得单独加hover)

那么如果把a改为块级标签会怎样,其里面的子元素得单独设置hover时的属性才生效

结论：a标签的hover只对其自身的文本元素生效,而不对其包含的子元素的文本生效

关于a标签的hover问题相关推荐

修改 echarts 默认样式记录，包含设置横向滚动条样式、坐标轴标签溢出 hover 显示全部
1.修改折线图上的数据标记点 showSymbol:false , 表示不展示数据点,只有鼠标 hover 时, tooltip 展示. series: [{name: '进场', // 名称,图例和 ...
html标签a+hover事件,触发a标签hover事件，如何在元素底部显示蓝色底块_html/css_WEB-ITnose...
回复讨论(解决方案) 你可以用li:hover border-bottom:3px solid blue; background-position:bottom; //是针对背景图片的位置,不是背景颜 ...
CSS笔记-除了a标签外的hover属性的应用
CSS笔记-除了a标签外的hover属性的应用内容简介:以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: div a href=# img alt=i am ...
css hover同级,CSS hover改变子标签/同级标签样式
.second { display: none; } .first:hover+.second, .second:hover { display: block; } /*第一个div hover时,改 ...
css :hover
二级菜单是,IE不支持li div等标签的 :hover事件,只支持a:hover 转载于:https://www.cnblogs.com/qingxinliwu/p/3674644.html
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...
css用hover制作下拉菜单
首先我们的需求就是制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
html浮动标签调整位置,HTML 获取当前标签在页面的位置，并且把其他的浮动窗口显示过来...
//event--事件对象 //ele当前标签 function hover(event, ele) { var t, l, a, b; a = ele ...
常用 html 标签
标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD). 标签:a 说明:标明超链接的起始或目的位置. 标签:acronym 说明:标明缩写词. 标签:address 说明: ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...

关于a标签的hover问题

结论：a标签的hover只对其自身的文本元素生效,而不对其包含的子元素的文本生效

关于a标签的hover问题相关推荐

最新文章

热门文章