About the use and BUG of pseudo-class hover in IE
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
What does game bug mean?
Feb 18, 2024 am 11:30 AM
What do game bugs mean? During the process of playing games, we often encounter some unexpected errors or problems, such as characters getting stuck, tasks being unable to continue, screen flickering, etc. These abnormal phenomena are called game bugs, that is, faults or errors in the game. In this article, we'll explore what game bugs mean and the impact they have on players and developers. Game bugs refer to errors that occur during the development or operation of the game, causing the game to fail to run normally or to behave unexpectedly. These errors may be due to
Apple iOS18 bug summary
Jun 14, 2024 pm 01:48 PM
As Apple's WWDC conference 2024 came to a successful conclusion, not only macos15 was announced, but the update of Apple's new iOS18 system attracted the most attention. Although there are many new features, as the first version of Apple's iOS18, people inevitably wonder whether it is necessary to upgrade Apple. iOS18, what kind of bugs are there in the latest release of Apple iOS18? After real use evaluation, the following is a summary of Apple iOS18 bugs, let’s take a look. Currently, many iPhone users are rushing to upgrade to iOS18. However, various system bugs are making people uncomfortable. Some bloggers said that you should be cautious when upgrading to iOS18 because "there are so many bugs." The blogger said that if your iPhone is
What does system bagage mean?
Nov 09, 2022 pm 02:40 PM
System bagage refers to system bug; the original meaning of bug is "bug", and now it can be used to refer to vulnerabilities that exist on the computer. The reason is that there are flaws in the system security policy, and there is a danger that attackers can access without authorization; in a broad sense On the topic, bug can be used to describe loopholes or defects that appear in various fields.
Sorting out Win11 errors and issues
Jan 13, 2024 pm 08:21 PM
Some people want to update win11, but they don’t know if there are many bugs in win11 and whether the update will cause problems. In fact, there are bugs in win11 now, but they have little impact on use. Are there many bugs in win11? Answer: There are still many bugs in win11. However, these bugs have little impact on daily use. If the user has high requirements for daily use, it is recommended to use it later. Summary of win11 bugs 1. Resource Manager 1. Sometimes memory overflow occurs, resulting in high memory usage of the Resource Manager. 2. This situation will cause the memory to occupy more than 70%, causing the computer to freeze or even crash. 2. Conflict and crash 1. Some applications are not compatible enough, causing conflicts with each other. 2. Although there are relatively few conflict procedures,
What is the life cycle of a bug?
Nov 08, 2022 pm 02:17 PM
The life cycle of a BUG is the process from when a BUG is discovered to when the BUG is closed. The specific process is: 1. Discover the BUG, that is, discover the loopholes or defects in the software program; 2. Submit the bug and try to describe the attributes and reproduction of the defect. Environment, type, level, priority and detailed reproduction steps, results and expectations, etc.; 3. Assign the bug, that is, assign the problem directly to the corresponding developer; 4. Analyze and confirm it as a defect; 5. Handle and fix the BUG; 6. Regression verification BUG; 7. Close BUG.
What does the Internet hot word bug mean?
Jan 21, 2021 pm 02:15 PM
The Internet hot word bug refers to the loopholes that exist on computers. A vulnerability* (bug) is a flaw in the specific implementation of hardware, software, protocols, or system security policy, which allows an attacker to access or damage the system without authorization. Vulnerabilities may come from defects in the design of application software or operating systems or errors in coding. They may also come from design defects or unreasonable logic flows in the business interaction process.
What is the bug in the latest version of win10 1903
Jan 07, 2024 pm 10:37 PM
After Microsoft updated the win101903 version, the new version not only fixed the bugs that appeared in the previous version, added and improved some functions, but also inevitably encountered the problems that existed in the new version. Most of them are bugs related to compatibility and stability, but fortunately they are not major problems. Let’s take a look at the specific content with the editor~ I hope it can help you. What is BUG 1903 in the latest version of win10? Microsoft announced that it has fixed three serious BUG1 in the Windows 10 2019 May update. The first is the audio problem with Dolby Atmos and home theater. Some devices may lose audio after installing Version 1903. It turns out that this audio BUG
One line of code to make your Python bug unique
Apr 14, 2023 am 09:16 AM
PrettyErrors is a tool that streamlines Python error messages. It is characterized by a very simple and friendly interface. Its most notable feature is that it supports color output on the terminal, annotates file stack traces, finds error messages, filters out redundant information, extracts key parts, and performs color annotation, thereby improving developer efficiency. Writing code itself is not easy, especially if a bug appears in tens of thousands of lines of code, and you will not be able to find the problem for a while. At this time, you must be very crazy and irritable. Especially when there is an error in the Python code, the screen is full of error messages, making it even more difficult to locate the error. Let’s first take a look at the traceback above. It only has one color and cannot be as high-level as the code.
