أرغب في تنفيذ مثل هذه الوظيفة ، لأن هناك الكثير من الكلمات في جدول ، لذلك أستخدم طريقة تفيض النص ، لكن لا يمكنني رؤية المحتوى المحدد في الجدول. أريد أن أدرك أنه عند تحريك الماوس لأعلى ، يمكن عرض المحتوى المخفي في هذا السطر. بالطبع هناك العديد من المكونات الإضافية على هذا الموقع ، لكنني لم أستخدمها ، لذلك كتبت بنفسي.
جزء CSS
<style> #showbox {width: 150px ؛ MINIight: 50px ؛ الخط: 100 14px/1 "Microsoft Yahei" ؛ الحدود: 1 بكسل Solid #3C8DBC ؛ العرض: لا شيء ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ خلفية اللون: #fff ؛ الحشو: 5 بكسل ؛ } </style>جزء HTML
<table id = "example1" rob = "grid"> <year 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: 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> </th> <th style =" text-align: center ؛ العرض: 10 ٪ ؛ "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold ؛ "> update time </font> </h> </tr> </ourd> <tbody> <trom> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </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> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </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> alare </td> <td> alare </td> <td> alare </tbody> </table> <div id = "showbox"> </viv>
JS جزء
$ (function () {function showbox (obj ، box) {var timer = null ؛ $ (obj) .on ("mouseover" ، function (e) {cleartimeout (timer) ؛ var clientx = e.clientx ؛ var clienty = $ (box) ClearTimeout (Timer) ؛أخيرًا ، هناك مكون في bootstrap يمكنه عرض المحتويات ، لكنه يظهر العنوان. لن يتغير في البداية. بعد أن يستيقظ شخص ما ، يمكنك تعيين العنوان مباشرة ، وهو مجرد تعيين العنوان للنص في الجدول.
الكود الذي يعرض المحتوى الكامل لهذا المربع عند نقل الماوس إلى الجدول هو المحتوى بالكامل المشترك من قبل المحرر. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.