The above web page effects are easily implemented by js, but the dynamic function is implemented by pure css, which is intended to deepen the understanding of hover and position positioning. I would like to share with you, please kindly advise.
As you can see, the bottom layer of this effect is the tag, and an interpretation box pops up in the hover state, which is called element 2. If you want element 2 to achieve the pop-up effect without affecting the layout of the underlying a tag, you should clearly use relative positioning. Therefore, the basic method of hover's combination with position is established. We use tag a as the benchmark for relative positioning. The Code is as follows:
Css
a{ display:block; height:30px; width:30px; background-color:green; float:left; margin-left:10px; position:relative; }a span{ display:hidden; }a:hover{ background-color:red; }a:hover span{ width:100px; height:50px; background-color:yellow; display:block; position:absolute; left:35px; top:5px; }
Html
<body> <a href="###"><span></span></a> <a href="###"><span></span></a> <a href="###"><span></span></a></body>
Shows the implementation effect (the yellow span is element 2, the green is a tag, and the tag hover is red ):
As you can see, hover and position positioning implement the pop-up interpretation box. But obviously this is not what we want. The key lies in how to overwrite element 2 to tag. In modern browsers, we can set the z-index attribute for span:
A: hover span {z-index: 1 ;}
Modern browsers achieve the following results:
This is what we want, but in ie6...
We can see that ie6 is incompatible. Obviously, z-index does not work, so how can we make element 2 overwrite the tag? After a lot of experiments, I found that, the sibling tag of the benchmark tag that element 2 is used to locate will overwrite element 2. For example, the third a tag overwrites element 2 because element 2 is positioned on the basis of the second a tag. Finding the cause makes it easy to solve this compatibility problem. You only need to nest a tag in tag a <em>. Let's locate element 2 on the basis of <em>, you will find that the tag cannot overwrite element 2 (although <em> will still overwrite element 2, em is an empty tag and can be set to hidden, so there is no impact ). The Code is as follows:
Css
a{ display:block; height:30px; width:30px; background-color:green; float:left; margin-left:10px; }a em{ display:block; height:30px; width:30px; position:relative; }a span{ display:hidden; }a:hover{ background-color:red; }a:hover span{ width:100px; height:50px; background-color:yellow; display:block; position:absolute; left:35px; top:5px; z-index:1; }
Html
<body><a href="###"><em><span></span></em></a><a href="###"><em><span></span></em></a><a href="###"><em><span></span></em></a></body>
In this way, ie6 can run perfectly, and finally the dynamic effect of the webpage starting with this article can be achieved through pure css!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
