A:hover span Hide/show issues

Source: Internet
Author: User

: Hover is one of the most commonly used pseudo-classes in CSS design, many brilliant effects can not be achieved without pseudo-class: hover, such as our common CSS menu, album effect and so on.

Perhaps it took so long to pseudo-class: hover, and some friends do not fully understand the rules of hover:

Reference:
In CSS1, this pseudo-class is available only for the A object. This pseudo-class does not work for a-object that has no href attribute (attribute).
In CSS2, this pseudo-class can be applied to any object.

But currently IE5.5, IE6 only support CSS1 in: hover, but the new IE7 is supported CSS2: hover.

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

IE BUG: When the <a> elements adopt position, it is necessary to add a background to show the control range of <a>, otherwise the mouse slide over without any effect.
<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><meta name="author"Content="www.xincss.com"/><style type="Text/css">a.moreshow {position:relative;} A.moreshow:hover {/*bug in IE, need to add attribute change bug, for example background*/background: #fff;} A.moreshow span {display:none;}    A.moreshow:hover span {position:absolute;    Display:block;    width:140px;    border:1px solid #1e6c09; Background: #eef5ee;}</style><title>xincss.com</title>IE BUG: When&lt;a&gt; elements in the use of position, you need to add a background to indicate the control range of &lt;a&gt;, or the mouse slide over without any effect. &LT;BR/><a href="#"title="" class="Moreshow"> "More" &LT;SPAN&GT;BKK Bangkok: -- to- -<br/>LCH Laem Chabang: -- -- -<br/>HCM Ho Chi Minh: -- the- -<br/>HK HK: -- A- -</span></a></body>

A:hover span Hide/show issues

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.