当鼠标悬停在引导程序中的列表文本上时如何弹出图像

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>

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