Я хочу реализовать такую функцию, потому что в таблице слишком много слов, поэтому я использую метод переполнения текста, но я не вижу конкретного содержания в таблице. Я хочу понять, что когда мышь перемещается вверх, скрытый контент может отображаться в этой строке. Конечно, на этом сайте много плагинов, но я не использовал его, поэтому я сам написал.
CSS часть
<style> #showbox {width: 150px; Мин-высот: 50px; Шрифт: 100 14px/1 "Microsoft yahei"; Граница: 1PX SOLIT #3C8DBC; дисплей: нет; позиция: абсолютно; Верх: 0; слева: 0; фоновый цвет: #fff; Заполнение: 5px; } </style>HTML Part
<таблица id = "Пример1" rol = "grid"> <tear style = "foangy-color: #e4e9f0;"> <tr rol = "row"> <th rowspan = "2" style = "text-align: center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> серийный номер </font> </th> <th rowspan = "2" style = "text-align: center; ширина: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th rowspan = "2" style = "text-align: center; ширина: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th rowspan = "2" style = "text-align: категория </font> </th> <th rowspan =" 2 "style =" text-align: center; Ширина: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> Unit </font> </th> <th rowspan =" 2 "style =" text-align: center; Ширина: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> Требования к достижению </font> </th> <th colspan =" 2 "style =" text-align: center; "rowspan =" 1 "> <font style =" font-weight: bold; "> progress </font> </th> </tr> <tr rol =" row "> <th style =" text-align: center; Ширина: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Последний прогресс </font> </th> <th style =" text-align: center; Ширина: 10%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> время обновления </font> </th> </tr> </tour> <tbode> <tr rol =" row "> <td> 1 </td> <td> Alare </td> <td> <td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> <td> <td> <td> <td> alar <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> <td> <td> <td> <td> alar <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> <td> <td> <td> <td> alar <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> <td> <td> <td> <td> alar <td> alare </td> <td> alare </td> <td> alare </tbody> </table> <div id = "showbox"> </div>
JS Part
$ (function () {function showbox (obj, box) {var timer = null; $ (obj) .on ("mouseover", function (e) {cleartimeout (timer); var clientx = e.clientx; var clienty = e.clienty; var txt = $ (this) .text (); timer = settimeout (function () {console. $ (box) .css ("Left", ClientX). ClearTimeout (Timer);Наконец, в начальной загрузке есть компонент, который может отображать содержимое, но показывает заголовок. Это не изменится в начале. После того, как кто -то просыпается, вы можете напрямую назначить заголовок, который просто присваивает заголовок тексту в таблице.
Код, который показывает весь содержимое этого поля, когда мышь перемещается в таблицу, является всем контентом, общим редактором. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.