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

Posted 2021-05-05

我想在不同的列表的<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>

答案

我也找到了解决方案。在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>

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