تلميح بصيغة ال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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcNz5bufg1lGw0zaH7GmQTNWJNG3hYkApYurmUvuBl8v9LpFxFd0AfV485JwZB0-bXke7trYKHJ84sG7N4g2SuJf_5ABRMV_PPTtU5zwFCJahBvl0VMitNhooJZ3nAyK4vAJKxpZM8-o/) no-repeat top;

}

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

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrXCbnkOHvDsYz63jrHVdzHEQM3Xef6_ghkO_zIGdyPHMOuYym6RJFRBPt_UCu8GJlte0cnKk-8pqZMVgZNP7DcOw8SBp_cuZlsOYSBTnFxP6enpbAKu60wc1GohX5Iv7DxXty8VeTfc/) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcNz5bufg1lGw0zaH7GmQTNWJNG3hYkApYurmUvuBl8v9LpFxFd0AfV485JwZB0-bXke7trYKHJ84sG7N4g2SuJf_5ABRMV_PPTtU5zwFCJahBvl0VMitNhooJZ3nAyK4vAJKxpZM8-o/) 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>





المصدر