鼠标悬停时将图像居中

时间：2019-07-19 18:53:55

标签： javascript jquery html css

我有几个相邻的表（第1行中有3个表，第2行中有2个表，第3行中有1个表），当我将鼠标悬停在表格单元格上时，一些图像应显示在屏幕中央。这是当前的样子（切换到整页）：

Processor
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;
}

但是，无论从哪个表格单元格显示图像，我似乎都无法弄清楚如何编辑样式值以将显示的图像定位在屏幕的中央，从当前滚动位置开始。 另外，是否可以防止页面始终在底部添加太多空白以为图像留出空间？
我使用lightBox作为元素来使图像后面的网页变灰。除了表格本身之外，整个页面都显示为灰色。我该如何解决？ 另外，如何将底部的2张桌子放置在中央？放下两个div无效。

1 个答案:

答案 0 :(得分：1)

您的内联CSS在2个OCR td标签上不同。这就是您遇到此问题的原因。

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
}
<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

相关问题
最新问题