在悬停CSS上获取图像上的图标

Posted 2023-03-06

【中文标题】在悬停CSS上获取图像上的图标

【英文标题】：Getting an icon on an image on hover CSS

【发布时间】：2018-09-12 19:49:33

【问题描述】：

悬停时，我无法在图像右侧获得整个图标。 （此表在图片库中）

这是我应该得到的：

这是我的代码：

.text-wrapper:hover 
  background: rgb(112, 88, 42);
  opacity: 0.8;
  font-weight: bold;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;


.image-cell:hover 
  text-align: left;

<a class="gallery-item" href="#"><img src="../images/04.jpg"  style="width:20%"><span class="text-wrapper">
    <span class="name">
			
    <table>
    <tr>
    <td class="portfolio-cell">
      <div class="value">portfolio text</div>
    </td>
    <td class="image-cell">
      <i class="fa fa-eye fa-lg"></i>
    </td>
    </tr>
    <tr>
      <div class="">text2</div>
    </tr>
    </table>

【问题讨论】：

show play icon on image hover的可能重复

使用桌子有什么理由吗？看起来不像表格数据 - 您不应该使用表格进行布局

我使用了一个表格来并排获取图标和文本。也许是一个浮点数：对；本来是一个更好的主意，我试过了，但没有成功。

【参考方案1】：

您不需要使用float: left/right 或表格来为您的布局创建该组件。您可以使用 flexbox，简单而强大，阅读更多相关信息。

你可以添加带有:after 伪元素的图标。简单例子https://jsfiddle.net/ruoazom7/11/