鼠標懸停時將圖像居中

Question

我有幾個相鄰的表（第1行中有3個表，第2行中有3個表，第3行中有1個表），當我將鼠標懸停在表格單元格上時，一些圖像應顯示在屏幕中央。 這是當前的樣子（切換到整頁）：

 function imageAppear(id) { document.getElementById(id).style.visibility = "visible"; document.getElementById('lightBox').style.visibility = "visible"; } function imageDisappear(id) { document.getElementById(id).style.visibility = "hidden"; document.getElementById('lightBox').style.visibility = "hidden"; } 

 .tool2 { border-collapse: collapse; border-spacing: 0; margin-left: 20px; } .tool2 td { width: 1%; font-weight: bold; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 th { width: 1%; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; padding: 5px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 .border { font-family: Arial, Helvetica, sans-serif !important; ; border-color: #333; text-align: center } .tool2 .header { font-family: Arial, Helvetica, sans-serif !important; ; background-color: #333; color: #ffffff; border-color: #000000; text-align: center } .wrapper { position: relative; z-index: 1; width: 100%; height: 50vh; } 

 <div class="wrapper" style="width: 33%; height: 150px; float:left;"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 1</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr1')" onmouseout="imageDisappear('ocr1')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr1" style="z-index: 100; position: absolute; transform: translate(-50%, -50%);visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe1')" onmouseout="imageDisappear('fe1')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe1" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px;float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 2 </th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr2')" onmouseout="imageDisappear('ocr2')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr2" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe2')" onmouseout="imageDisappear('fe2')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe2" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px; float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 3</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr3')" onmouseout="imageDisappear('ocr3')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr3" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe3')" onmouseout="imageDisappear('fe3')">Field extract <img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" %} " alt="UI_FE " id="fe3" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; " /></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 4</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr4') " onmouseout="imageDisappear('ocr4') ">OCR<img src="" alt="Ui_OCR " id="ocr4" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe4') " onmouseout="imageDisappear('fe4') ">Field extract<img src="" alt="UI_FE " id="fe4" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 5</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr5') " onmouseout="imageDisappear('ocr5') ">OCR<img src="" alt="Ui_OCR " id="ocr5" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe5') " onmouseout="imageDisappear('fe5') ">Field extract<img src="" alt="UI_FE " id="fe5 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 6</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr6') " onmouseout="imageDisappear( 'ocr6') ">OCR<img src="" alt="Ui_OCR " id="ocr6" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe6') " onmouseout="imageDisappear('fe6') ">Field extract<img src="" alt="UI_FE " id="fe6 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 7</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr7') " onmouseout="imageDisappear('ocr7') ">OCR<img src="" alt="Ui_OCR " id="ocr7" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe7') " onmouseout="imageDisappear('fe7') ">Field extract<img src="" alt="UI_FE " id="fe7 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left; "> <table class="tool2 " style="width: 90%; "> <tr> <th class="header " colspan="5 ">Table 8</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr8') " onmouseout="imageDisappear('ocr8') ">OCR<img src="" alt="Ui_OCR " id="ocr8" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe8') " onmouseout="imageDisappear('fe8') ">Field extract<img src="" alt="UI_FE " id="fe8 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div id="lightBox " class="light-box "></div> 

但是我面臨一些問題：
1.我似乎無法弄清楚如何編輯<img>樣式值，以將顯示的圖像從當前滾動位置開始，放置在屏幕中央，無論從哪個表格單元格顯示圖像。
2.頁面底部增加了太多空白，為圖像留出了空間。 有解決辦法嗎？
3.我使用lightBox作為元素來使圖像后面的網頁變灰。 除了表格本身之外，整個頁面都顯示為灰色，但是我不知道為什么會這樣。

Answer 1

您的內聯CSS在2個OCR td標簽上不同。 這就是您遇到此問題的原因。

 function imageAppear(id) { document.getElementById(id).style.visibility = "visible"; document.getElementById('lightBox').style.visibility = "visible"; document.getElementsByClassName("wrapper")[0].style.position = "static"; } function imageDisappear(id) { document.getElementById(id).style.visibility = "hidden"; document.getElementById('lightBox').style.visibility = "hidden"; document.getElementsByClassName("wrapper")[0].style.position = "relative"; } 

 .tool2 { border-collapse: collapse; border-spacing: 0; margin-left: 20px; } .tool2 td { width: 1%; font-weight: bold; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 th { width: 1%; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; padding: 5px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 .border { font-family: Arial, Helvetica, sans-serif !important; ; border-color: #333; text-align: center } .tool2 .header { font-family: Arial, Helvetica, sans-serif !important; ; background-color: #333; color: #ffffff; border-color: #000000; text-align: center } .wrapper { position: relative; z-index: 1; width: 100%; height: 50vh; } 

 <div class="wrapper" style="width: 33%; height: 150px; float:left;"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 1</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px;float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 2 </th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px; float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 3</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract <img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 200px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 4</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr') " onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear( 'fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 5</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear('fe')">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 6</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr')" onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 7</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr') " onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear( 'fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div id="lightBox" class="light-box "></div> 

順便說一下， id是唯一的標識符，因此不要在多個標簽上分配相同的id 。 如果想分配相同的內容，則添加為類而不是id