Quiero implementar dicha función, porque hay demasiadas palabras en una tabla, por lo que uso el método de desbordamiento del texto, pero no puedo ver el contenido específico en la tabla. Quiero darme cuenta de que cuando el mouse se mueve hacia arriba, el contenido oculto se puede mostrar en esta línea. Por supuesto, hay muchos complementos en este sitio web, pero no lo usé, así que escribí uno yo mismo.
Parte de CSS
<syle> #showbox {ancho: 150px; Min-altura: 50px; FUENT: 100 14px/1 "Microsoft Yahei"; borde: 1px Solid #3C8DBC; Pantalla: ninguno; Posición: Absoluto; arriba: 0; Izquierda: 0; Color de fondo: #fff; relleno: 5px; } </style>parte html
<table id = "ejemplo1" role = "grid"> <late style = "de fondo de fondo: #e4e9f0;"> <tr role = "row"> <th rowspan = "2" style = "text-align: centro; ancho: 6%;" colspan = "1"> <font style = "font-weight: bold;"> número de serie </font> </th> <th showspan = "2" style = "text-align: centro; ancho: 10%;" colspan = "1"> <font style = "font-weight: bold;"> nombre </font> </th> <th showspan = "2" style = "text-align: centro; ancho: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th showspan = "2" style = "text-align: categoría </font> </th> <th rowspan =" 2 "style =" text-align: Center; Ancho: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> unit </font> </th> <th showspan =" 2 "style =" text-align: center; Ancho: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> requisitos de logro </font> </th> <th colspan =" 2 "style =" text-align: center; "RowsPan =" 1 "> <font style =" font-weight: bold; "> progreso </font> </th> </tr> <tr role =" row "> <th style =" text-align: center; Ancho: 30%; "RowsPan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Último progreso </font> </th> <th style =" text-align: center; ancho: 10%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Tiempo de actualización </font> </th> </tr> </our> <tbody> <tr rol =" fila "> <td> 1 </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> alare </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> alare </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> alare </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> alare </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> alare </tbody> </box> <div id = "showbox"> </div>
parte js
$ (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.log (clienty clienty); $ (Box) .CSS ("Left", ClientX) .CSS ("Top", Clienty); ClearTimeOut (temporizador);Finalmente, hay un componente en Bootstrap que puede mostrar el contenido, pero muestra el título. No cambiará al principio. Después de que alguien se despierta, puede asignar directamente el título, que solo asigna el título al texto en la tabla.
El código que muestra todo el contenido de este cuadro cuando el mouse se mueve a la tabla es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.