仿Title樣式

<style type="text/css">
    /*仿 title 屬性的樣式*/
.newsInfo:hover {
	background: #eee;
	color: #333;
	z-index: 999;
}
.newsInfo {
	color:black;
	position: relative;
	z-index: 0;
}  
.newsInfo span {
	display: none;
} 
 /*設置正常下的span爲隱藏狀態*/
.newsInfo:hover span {
	display: block;
	position: absolute;
	width:auto;
	top: 28px;
	left:100px;
	border: 1px solid #cccccc;
	background: #fff;
	color: #333;
	padding: 5px;
	text-align: left;
	overflow: hidden;
}

/*截取字符串樣式*/
.newInfoTruncation {
	width:auto;
	white-space:nowrap; 
	/*換行*/
	word-break:keep-all; 
	/*超過的部分隱藏*/
	overflow:hidden; 
	/*隱藏後顯示省略號*/
	text-overflow:ellipsis;
}
</style>
<td class="newsInfo">AAAAA
                <span>
                    <table>
                        <tr>
                            <td>12121235434654645645</td>
                            <td>3454</td>
                        </tr>
                        <tr>
                            <td>23434545464564524645</td>
                            <td>656</td>
                        </tr>
                        <tr>
                            <td>35345345345345345345345</td>
                            <td>345345</td>
                        </tr>
                    </table>
                </span>
            </td>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章