أرغب في تنفيذ مثل هذه الوظيفة ، لأن هناك الكثير من الكلمات في جدول ، لذلك أستخدم طريقة تفيض النص ، لكن لا يمكنني رؤية المحتوى المحدد في الجدول. أريد أن أدرك أنه عند تحريك الماوس لأعلى ، يمكن عرض المحتوى المخفي في هذا السطر. بالطبع هناك العديد من المكونات الإضافية على هذا الموقع ، لكنني لم أستخدمها ، لذلك كتبت بنفسي.
جزء CSS
<Style> #showbox {width: 150px ؛ min-height: 50px ؛ font: 100 14px/1 "Microsoft yahei" ؛ الحدود: 1PX Solid #3C8DBC ؛ العرض: none ؛ الموضع: TOP ؛ TOP: 0 ؛ left: 0 ؛ background-color: #fff ؛ PACD: 5 px ؛جزء HTML
<table id = "example1" rob = "grid"> <tow style = "background-color: #e4e9f0 ؛"> <tr rob = "row"> <th rowspan = "2" style = "text-align: center ؛ width: 6 ٪ ؛" colspan = "1"> <font style = "font-weight: Bold ؛"> الرقم التسلسلي </font> </h> <th rowspan = "2" style = "text-align: center ؛ width: 10 ٪ ؛" colspan = "1"> <font style = "font-weight: Bold ؛"> name </font> </h> <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> </h> <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 ؛ العرض: 30 ٪ ؛ "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold ؛ "> أحدث تقدم </font> </h> </h> </tman rob = "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> alare </td> <t d> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> al هي </td> <td> alare </td> <td> </r> <tr> <tr> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> </td> <tr> <tr rob = "row"> <td> 3 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> </td> </tbody </tbody> </tbod
JS جزء
$ (function () {function showbox (obj ، box) {var timer = null ؛ $ (obj) .on ("mouseover" ، function (e) {cleartimeout (timer) ؛ var clientx = e.clientx ؛ var clienty = clienty) ؛ $ (box) .css ("left" ، clientx) .css ("top" ، clienty) ؛ if (txt == "") 1000) ؛}) ؛ $ (obj) .on ("mouseout" ، function () {cleartimeout (timer) ؛ $ (box) .hide () ؛}) ؛} showbox ("#example> tbody td" ، "#showbox") ؛}) ؛أخيرًا ، هناك مكون في bootstrap يمكنه عرض المحتويات ، لكنه يظهر العنوان. لن يتغير في البداية. بعد أن يستيقظ شخص ما ، يمكنك تعيين العنوان مباشرة ، وهو مجرد تعيين العنوان للنص في الجدول.
ما سبق هو المحتوى الكامل لهذه الشبكة استنادًا إلى رمز JS الذي قدمه لك المحرر عند عرض جدول تحوم الماوس. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!