css自定义title显示位置

  通过div+css,可以取消鼠标移动到有title控件上时显示的系统默认提示。思路主要是设置控件的位置为position:relative,给控件内置一个span,设置position:absolute;,然后通过:hover伪类实现span display属性的控制,效果如下

css自定义title显示位置

  源代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.poptitle{position:relative;}
.poptitle:hover{background:#666;color:White;}
.poptitle .tooltip{display:none;position:absolute;top:20px;border:solid 1px black;background:#fff;left:0px;width:160px;color:Black;z-index:100}
.poptitle:hover .tooltip{display:block;background:#fff;}
</style>
<a class="poptitle" href="/">A标签<span class="tooltip">Web开发网<br />Web开发网</span></a>
<br /><br />div+css自定义title显示位置<br />
div+css自定义title显示位置<br /><br />
<u class="poptitle" href="/">U标签,注意IE6只有a支持hover伪类<span class="tooltip">Web开发网<br />Web开发网</span></u>
<br /><br />div+css自定义title显示位置<br />div+css自定义title显示位置<br />div+css自定义title显示位置

 


原创文章,转载请注明出处:css自定义title显示位置

评论(0)Web开发网
阅读(478)喜欢(0)HTML/CSS兼容/XML