Home >Web Front-end >CSS Tutorial >About the use and BUG of pseudo-class hover in IE
About the use and BUG of pseudo-class hover in IE
- 不言Original
- 2018-06-21 17:40:561748browse
This article mainly introduces the use and bugs of pseudo-hover in IE. It has certain reference value. Now I share it with you. Friends in need can refer to
Pseudo-class hover in IE Usage and BUG, friends in need can refer to it.
Pseudo-class:hover rules:
In CSS1, this pseudo-class can only be used for a objects. And for a objects without href attributes, this pseudo-class has no effect;
In CSS2, this pseudo-class can be applied to any object;
Currently IE5.5 and IE6 only support :hover in CSS1, but The new IE7 and Firefox support :hover in CSS2.
First use CSS2 writing method to implement:
<html>
<head>
<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a {display:none;}
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}
</style>
</head>
<body>
<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html>Tips: You can modify some of the code first and then run it
You can test it and find that it works in Firefox, etc. Browsers that have good support for CSS2 can display the effect we want to achieve, but it cannot be achieved in IE6.
Let’s change our thinking and use the writing method of CSS1 to take a look:
In CSS1, since the use of li element:hover cannot be supported, the text is included in a and use:hover for a. And put the part to be displayed and hidden into the span element;
In CSS, we set a as a block-level element, and make the size and width of a the same as li;
And set a as a relative position, using a to simulate li in the above example;
Use span to simulate a in the above example, set span to be hidden by default (display:none;);
When a is triggered (:hover), Then span display (display:block;);
However, if modified in the above way, the effect of the example will still not be displayed in IE6.
The reason is: IE browser's own parsing problem is a bug in the pseudo-class:hover in IE5.5 and IE6.
How to solve this problem?
This BUG can be eliminated by adding some special CSS attribute declarations to the link attributes.
li a:hover {}
We only set width:100px for its properties; we found that there was still no change in IE6. We tried to change the value of width, such as making it width:99px, and something strange happened. Yes, in IE6, the hidden part is displayed when triggered. We then set only color to the attribute of li a:hover to test (the initial value is #fff), changed the color value, and found that the display cannot be triggered under IE6. . .
Finally, it was found that, except for text-decoration, color, and z-index, which cannot trigger display (there may be some missing attributes for the parts that cannot trigger display), other attributes can be used to eliminate pseudo-classes: hover BUG specific properties.
Note:
1. It is not recommended to change the display value as a specific attribute to eliminate this BUG, and in some cases this attribute may not be able to eliminate the BUG.
2. For the colors in border and background that are specific attributes, we can also use full letters and abbreviations to change them. For example, #fff and #ffffff are resolved into two different values in eliminating bugs.
CSS1 writing method final effect:
<html>
<head>
<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; }
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li a:hover {background:#ccc;}
li span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }
</style>
</head>
<body>
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>Tips: You can modify part of the code first and then run
Minimum code implementation version (xugang implementation):
<html>
<head>
<style>
li {height:10px; width:120px; background:#000;}
li a{height:10px; width:120px; display:block;}
li a:hover {background:#ccc;}
li span {display:none;}
li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;}
</style>
</head>
<body>
<ul>
<li>
<a href="#" title="">鼠标移过来触发
<span>
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</span>
</a>
</li>
</ul>
</body>
</html>Tips: You can modify part of the code first and then run it
The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Simulate the effect of box-shadow in css3 under IE
The above is the detailed content of About the use and BUG of pseudo-class hover in IE. For more information, please follow other related articles on the PHP Chinese website!