Quero implementar essa função, porque há muitas palavras em uma tabela, por isso uso o método de transbordamento de texto, mas não consigo ver o conteúdo específico na tabela. Quero perceber que, quando o mouse for movido, o conteúdo oculto pode ser exibido nesta linha. É claro que existem muitos plug-ins neste site, mas eu não o usei, então escrevi um.
Parte css
<estilo> #showbox {width: 150px; Min-altura: 50px; Fonte: 100 14px/1 "Microsoft Yahei"; Border: 1px Solid #3C8DBC; Exibir: Nenhum; Posição: Absoluto; topo: 0; Esquerda: 0; Background-Color: #FFF; preenchimento: 5px; } </style>parte html
<tabela id = "Exemplo1" role = "grade"> <tear style = "cor de fundo: #e4e9f0;"> <tr role = "linha"> <throwspan = "2" style = "text-align: Center; largura: 6%;" colspan = "1"> <font style = "font-weight: Bold;"> Número de série </font> </th> <th rowspan = "2" style = "text-align: Center; largura: 10%;" colspan = "1"> <font style = "font-weight: Bold;"> nome </font> </th> <th rowspan = "2" style = "text-align: Center; largura: 10%;" colspan = "1"> <font style = "font-weight: Bold;"> nome </font> </th> <th rowspan = "2" style = "text-align: category </font> </th> <th rowspan =" 2 "style =" text-align: Center; largura: 8%; "colspan =" 1 "> <font style =" font-weight: BOLD; "> unidade </font> </th> <th rowspan =" 2 "style =" text-align: Center; largura: 26%; "colspan =" 1 "> <font style =" font-weight: BOLD; "> Requisitos de conquista </font> </th> <th colspan =" 2 "style =" text-align: Center; "ROWSPAN =" 1 "> <font style =" font-weight: Bold; "> Progress </font> </th> </tr> <tr role =" linha "> <th style =" text-align: Center; largura: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: Bold; "> mais recente progresso </font> </th> <th style =" text-align: Center; largura: 10%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: BOLD; "> Atualizar tempo </font> </th> </tr> </tour> <tbody> <td role =" linha "> <td> 1 </td> <d> alare </td> <Td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> <tare> <Td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> <tare> <Td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> <tare> <Td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> <tare> <td> alare </td> <td> alare </td> <td> alare </tbody> </body> <div id = "showbox"> </div>
JS parte
$ (function () {função showbox (obj, caixa) {var timer = null; $ (obj) .on ("mouseOver", function (e) {clearTimeout (timer); var clientx = e.clientx; var clienty = e.clienty; var txt = $) .text (); Caixa) .CSS (Esquerda ", ClientX) .CSS (top", Cliente); ClearTimeout (Timer);Finalmente, há um componente no bootstrap que pode exibir o conteúdo, mas mostra o título. Não mudará no início. Depois que alguém acorda, você pode atribuir diretamente o título, que está apenas atribuindo o título ao texto na tabela.
O código que mostra todo o conteúdo desta caixa quando o mouse é movido para a tabela é o conteúdo inteiro compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.