تلميح بصيغة الcss

11‏/06‏/2010










درسنا اليوم ...

كيف تعطي وصفا موجزا 

لأي صلة من شأنها أن تظهر عند الماوس عبر الارتباط مع آثار تلميحات.


< ((((( \\\\\\\\\\    للمشاهدة   ////////// ))))) >

كود ال css




/*---------- bubble tooltip -----------*/

a.tt{

    position:relative;

    z-index:24;

    color:#3CA3FF;

    font-weight:bold;

    text-decoration:none;

}

a.tt span{ display: none; }





/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;

}


كود ال html




<a href="destination_link" class="tt">رابط النص<span class="tooltip"><span class="top"></span><span class="middle">هنا تضع النص </span><span class="bottom"></span></span></a>





المصدر