[转载]利用CSS显示隐藏元素

My idea was to add position:relative to the link, in order to allow the span element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 .

Now, let's have a look at the basic css code for the tooltip: 

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
 
原文地址:http://psacake.com/web/jl.asp
posted on 2012-06-14 22:46  Romen  阅读(148)  评论(0编辑  收藏  举报