Saya ingin menerapkan fungsi seperti itu, karena ada terlalu banyak kata dalam sebuah tabel, jadi saya menggunakan metode teks yang meluap, tetapi saya tidak dapat melihat konten spesifik dalam tabel. Saya ingin menyadari bahwa ketika mouse dipindahkan, konten tersembunyi dapat ditampilkan di baris ini. Tentu saja ada banyak plug-in di situs web ini, tetapi saya tidak menggunakannya, jadi saya menulisnya sendiri.
Bagian CSS
<tyle> #showbox {width: 150px; Min-tinggi: 50px; Font: 100 14px/1 "Microsoft Yahei"; BORDER: 1PX SOLID #3C8DBC; Tampilan: Tidak Ada; Posisi: Absolute; TOP: 0; Kiri: 0; Latar Belakang-Color: #FFF; padding: 5px; } </style>bagian html
<Table id = "example1" role = "grid"> <style sobek = "latar belakang-color: #e4e9f0;"> <tr role = "row"> <tH rowspan = "2" style = "text-align: center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> nomor seri </font> </th> <rowspan = "2" style = "Text-Align: Center; Width: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <thowspan = "2" style = "text-align: tengah; lebar: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <thowspan = "2" style = "text-align: kategori </font> </t> <thowspan =" 2 "style =" text-align: center; Lebar: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> unit </font> </th> <rowspan =" 2 "style =" text-align: center; Lebar: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> Persyaratan pencapaian </font> </t> <th colspan =" 2 "style =" text-align: center; "rowspan =" 1 "> <font style =" font-weight: bold; "> progress </font> </th> </tr> <tr role =" row "> <th style =" text-align: center; Lebar: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> kemajuan terbaru </font> </t> <th style =" text-align: center; width: 10%;" rowspan="1" colspan="1"><font style="font-weight:bold;">Update time</font></th></tr> </tour> <tbody> <tr role="row"> <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> </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> </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> </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> </td </td </td </td </td </td </td </td </td </td </td </td </td </td> </td <td> Alare </td> <td> Alare </td> <td> Alare </tbody> </able> <div id = "showbox"> </div>
Bagian 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) () {clients, clients, clients, clients, clients. clients. clients. clients. clients. clients. Clients. clients. Clients. Clients, clients, clients, clients, clients, clients, clients, clients. $ ( ClearTimeOut (Timer);Akhirnya, ada komponen di bootstrap yang dapat menampilkan konten, tetapi menunjukkan judulnya. Itu tidak akan berubah di awal. Setelah seseorang bangun, Anda dapat langsung menetapkan judul, yang hanya menetapkan judul ke teks di tabel.
Kode yang menunjukkan seluruh konten kotak ini ketika mouse dipindahkan ke tabel adalah seluruh konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.