Maison >interface Web >tutoriel HTML >css实现table中td单元格鼠标悬浮时显示更多内容_html/css_WEB-ITnose

css实现table中td单元格鼠标悬浮时显示更多内容_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:26:081160parcourir

table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容。

正常显示样式:

鼠标hover时:

html:

<td>displayAddress<span class="tdtip">popAddress</span></td>

css:

td{    position:relative;     z-index:2;}td:hover{    z-index:3;    background:none; }td .tdtip  {    display: none;}td:hover .tdtip  {     display: block;    position: absolute;    top: 8px;     background-color: whitesmoke;    color: royalblue;    word-break: break-all;}

 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn