在a:hover中改变子标签内样式的注意

摘要:
此外,还必须添加a:hover属性。此属性不能与a相同。如果不是,IE6认为a标记在悬停时没有更改,因此不会执行悬停,也不会执行:hoveriv,因此,修改后的代码是Java代码1.<style>2.adiv{3.背景色:红色;4.100px;5.高度:100px;6;参考他人的测试结果Java代码1。我们使用其他属性来设置:宽度、位置、背景、文本装饰、字体大小、字体粗细、字体系列、边框、浮动、显示、字体样式、边距、填充、文本对齐、溢出、文本转换、文本无关、z索引、垂直对齐。

a内有个div,需要当a hover的时候,div改变背景色,此只是个demo,只说明原理和注意事项

Html代码

<a><div></div></a>  

样式为

Java代码
1.<style>  
2.div{  
3.      
4.    background-color:red;  
5.    100px;  
6.    height:100px;  
7.}  
8.</style> 

添加hover样式

Java代码
1.<style>  
2.    div{  
3.        background-color:red;100px;height:100px;  
4.    }  
5.    a:hover div{  
6.        background-color:green;  
7.    }  
8.</style>  

 这里在firefox中已经可以实现了,但IE6却无效果(IE7理论上可以,未亲测,这应该属于CSS1的BUG,而IE7支持CSS2)

这里必须注意,IE6中认定一个标签是a,必须在a标签内加入href,如果无,IE6会将a作为p或者什么来处理。

另外必须添加a:hover属性,该属性不能与a相同,如果无,IE6认为该a标签hover时未变化,不会执行hover,同样也不会执行a:hover div,所以修改后的代码为

Java代码
1.<style>  
2.    a div{  
3.        background-color:red;  
4.        100px;  
5.        height:100px;  
6.    }  
7.    a:hover{  
8.        border:none;  
9.    }  
10.    a:hover div{  
11.        background-color:green;  
12.    }  
13.</style>  
14.<a href="#"><div></div></a>  

注意:并不是所有属性都能替换上面的borer:none;引用别人的测试结果

Java代码

1.我们再用其他属性进行设置:width,positon,background,text-decoration,font-size,font-weight,font-family,border,float,display,font-style,margin,padding,text-align,overflow,text-transform,text-indent,z-index,vertical-align。  
2.  
3.我们发现除了text-decoration,color,z-index不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性,欢迎朋友补充)外,其他属性均可以做为消除伪类:hover BUG的特定属性。

总结:

要让IE6能实现内部标签样式也能变化,必须满足

1、a标签必须有href

2、a和a:hover必须有不同

免责声明:文章转载自《在a:hover中改变子标签内样式的注意》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇arcgis对谷歌遥感影像拼接java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css 实现 ul li 的显示与隐藏

本文从CSS角度来实现导航栏的显示与隐藏,用到了ul、li标签 html源代码: css文件: 有点小感悟:总是先设置默认情况:默认不显示或者默认黑色,然后再设置hover时的具体情况 li颜色变化比较简单:设置个全局颜色(默认颜色),然后li:hover设置hover时的颜色; li 显示比较复杂,因为涉及到自菜单显示情况:总是先设置下属所有子菜单全...

CSS3特效----图片动态提示效果

需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合,制作动画 4.学会简单的媒体查询应用 figure ,HTML5语义化标签: 用于规定独立的流内容(图像、图表、照片、代码等) figcaption,HTML...

tr标签使用hover的box-shadow效果不生效

先说问题: 这是大致的HTML结构 <table cellpadding="0"cellspacing="0"> <thead> <tr> <th>Phone number</th> <th>Date</th> <th&...

CSS 属性选择器的深入挖掘

CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。 [attr=val]:该选择器仅选...

css hover伪类选择器与JQuery hover()方法

css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link{color:#FF0000;}/* 未访问的链接 */ a:visited{color:#00FF00;}/* 已访问的链接 */ a:hover{color:#FF...

CSS动画:animation、transition、transform、translate

https://blog.csdn.net/px01ih8/article/details/80780470 一、区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画)、transition(过渡)、transform(变形)、translate(移动)。 CSS3中的transform(变形)属性用于内联元素和块级元素,可...