javascript - 当鼠标悬停在 Bootstrap 中的列表文本上时如何弹出图像

Question

我想在不同列表的 <td> 上显示不同的图像元素，只要鼠标悬停在它上面。我正在使用 Bootstrap 来开发我的页面。我试着在这里搜索，但没有找到明确的答案。代码在这里。请提供任何帮助:

<section>
<div class="container">
<div class="head-list" id="list">
<h3>OUR PRESTIGIOUS GOLD MEDALISTS</h3>
</div>
</div>
<div class="container">
  <div class="row">     
    <div class="col-lg-12 black text-center">
<table class="table table-responsive">
<thead class="table" style="background-color:gold; color: black">
<tr>
  <th width="70">SR.#</th>
  <th width="255">STUDENT'S NAME</th>
  <th width="180">POSITION</th>
  <th width="120">EXAM</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Text 1 on which I want an img to hover when mouse is pointed here</td>
  <td>simple txt 1a</td>
  <td>1990</td>
</tr>
<tr>
 <th scope="row">2</th>
  <td>Text 2 on which I want an img to hover when mouse is pointed here</td>
  <td>Simple txt 2a</td>
  <td>1995</td>
</tr>
<tr>
 <th scope="row">3</th>
  <td>Text 3 on which I want an img to hover when mouse is pointed here</td>
  <td>Simple txt 3a</td>
  <td>1998</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</section>
        <div class="clearfix"> </div>

上面代码的相关CSS是:

<style>

.head-list h3{
font-size: 3.2em;
color: #2A72D3;
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: capitalize;
margin-bottom:30px;
letter-spacing:2.2px;
}
tbody {color: white;
       font-weight: bold;
       font-size: 1.1em;
       font-family: 'Montserrat Alternates', sans-serif;
      }
table, th, td { /*this is the relavant css styling for the above table in 
                  question*/
    text-align: center;
    padding: 2px;
    border: 1px solid gold;
    }
table#t01 {   /*This styling is for another table i created but on the same 
                page*/
    text-align: left;
    padding: 1px;
    background-color: #3B3939;
    border: 1px solid black;
}
</style>

Answer 1

我也找到了解决方案。在css中添加了更多样式，然后将其显示在列表中。所以在 css 中我添加了这些:

    .hover_img a {
    position: relative;
    color: antiquewhite;
}
.hover_img a span {
    position:absolute;
    left: 80%;
    top: 10px;
    display:none; z-index: 99; 
}
.hover_img a:hover span {
display: block;
width: 200px;
}

在 html 部分，我在每个 <td> 中添加了这个我的有序列表的元素:

<td> <div class="hover_img">
         <a>My text<span><img src="images/f61.jpg" alt="image" height="100">
</span></a>
</div> </td>

因此，只要光标悬停在“我的文本”上，就会显示一个图像。我根据我的布局调整了图像的位置。它在响应 View 中也工作正常。如果您能就此代码、页面加载、服务器响应等提出任何优化建议，我将不胜感激。