Pseudo class in IE: use of hover and bugs

Last Update:2017-02-28 Source: Internet

Author: User

Tags object relative xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

: Hover is one of the most commonly used in CSS design, many of the implementation of the brilliant effect can not be separated from the pseudo class: hover, such as our common pure CSS menus, photo albums and so on.

Maybe it took so long pseudo class: hover, and some friends don't fully understand hover's rules:

Reference:
In CSS1, this pseudo class is available only for a object. And for a object with no href attribute (attribute), this pseudo class does not work.
This pseudo class can be applied to any object in CSS2.

But at present IE5.5, IE6 only support in CSS1: hover, but the new IE7 is to support CSS2: hover.

When we use pseudo class: hover to do some special effects, according to CSS2 very well done, but in order to occupy the mainstream browser IE6, we have to do a lot of work, such as adding a element to simulate the completion of the final effect.

Perhaps to talk about space caves, see the following example of a common triggering display ( just select IE6 for example ).

We first use the CSS2 to achieve:

XHTML section:

<ul>
<li> mouse move over to trigger me! <a href= "#" title= "> Haha, you finally found out! </a></li>
</ul>

CSS section:

* {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;}

Demo Effect :

Run Code Box
<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>ie: the use of hover and bug</title><style>* {margin: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: Hovera{display:block text-decoration:none;width:100px; Height:100px;background: #c00; position:absolute; top:50px; left:50px; Color: #fff;} </style></pead><body><ul> <li> mouse move over to trigger me! <a href= "#" title= "> Haha, you finally found out! </a></li> </ul></body></ptml>

We can test the discovery in FF and so on CSS2 support very good browser, can show us to achieve the effect, but in the IE6 but cannot realize.

Let's take a look at this moment in a different way of thinking, using CSS1 's writing to see, this time because of the inability to support the LI element: the use of hover, we have to include all text in a, to a use: hover, and will show hidden parts into the span element, First of all, we make some adjustments to XHTML, as follows:

XHTML section:

<ul>
<li><a href= "#" title= "" > Mouse over to trigger me! <span> haha, you finally found </span></a></li>
</ul>

In CSS, we set a to block-level elements, and make the size and width of a and the same as Li, and set a as the relative position, using a to simulate the Li in the above example, and span to simulate a in the example, set span to hide by default (Display:none;), when A is triggered (: Hover), span display (display:block;)

CSS section:

* {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 span {display:none;}
Li A:hover span {display:block; width:100px height:100px; background: #c00; position:absolute; top:50px; left:50px; Color: #fff; }

Run Code Box
<! DOCTYPE htmlpublic "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>ie: the use of hover and bug</title><style>* {margin: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 span {display:none} li A:hoverspan {display:block; width:100px; height:100px; background: #c00;p osition:absolute; top:50px; left:50px; Color: #fff; }</style></pead><body><ul> <li><a href= "#" title= "" > Mouse move over to trigger me! <span> Haha, finally you find </span></a></li> </ul></body></ptml>

[1] [2] Next page

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More