Pure CSS tooltip combined with SEO

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Second, I first declare that this is my according to Andy BUDD and other people wrote the book + own thinking of the SEO technology combined

    again, this is not a new technology, but I write it, is to tell you, in fact, in some obscure place to do SEO, but can play a very good effect Finally, declare the copyright, this original is the first time in the backward   and   My   Blog listener mind)
   
OK, go to text:
              
      What is tooltip: 
                                tooltip is when the mouse hovers over an element with the title attribute, the browser can eject a small yellow text box.
                         may say that the crease is simple, with js+css a while, but, with JS at all to SEO a little role also did not!
                         So, here I want to introduce a kind of pure CSS ToolTip, so that can greatly improve the quality of SEO, at the same time, he is also an advanced CSS technology.
          
Let's get an example here:
          <p>
           <a href= "/"   class= "Tishi"
           Mouse move here   <span> hint language </span> </a>  will see the pure CSS tooltip
          </p>

This link is "mouse movement here" link to the outdated, at the same time, when the mouse moved to the link, will pop up the pure CSS style, so that when the search engine spiders crawl, is not the hint language to omit
In this way, it is very good to use this pure CSS tool, effectively improve the SEO effect.

So how does this hint tip?

What we need to do here is to set the Position property of the link (anchor) to relative so that you can absolutely position the contents of the span relative to the parent element, that is to say,
No matter where you use this technique on a Web page, you can find the ToolTip next to the link.
At the same time, our goal is to want the viewer's mouse to move to the link is only appear prompts, so, first set the span of the display property to None

The code is like this
                      A.tishi {
                                   position:relative;
                              }
                      A.tishi span {
                                         Display:none;
                                     }

Then, when the mouse moves to the anchor here, we hope that the span is displayed at this time.
Therefore, we need to set the properties of span to block and limit the mouse to the link (the anchor is too hard to beat).

End
We test the above code, we can have the basic requirements, that is, when the mouse is resting on the link, the link will appear next to the text of span

Now, we want span text to appear at the bottom right of the link (because staying at the bottom right is the most consistent form of the viewer's habits)
so we have to have the span position set to differs (absolute positioning), and look at the following code:
                  
                   A.tishi:hover span {
                                                Display:block;
                                                Position:absoulte;
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp;                                 top:1px;
                                                left:2px;
                                            }
Basically, OK now

Now, let's beautify the span label (perfect CSS code)


A.tishi:hover span {


Display:block;


Position:absoulte;


top:1px;


left:2px;


border:1px solid #9f6;


Background-color: #ff6;


color: #000;


padding:0.3px 0.5px;


}

OK, this time can go to browser preview, the effect map can go to my blog link to see, although my is f2blog, but his technology is this truth.

This method is effective under the Ff,ie, if have the reader to feel which aspect has the question, please PM me, everybody studies together, progresses together.