时间戳

首页 > 解决方案 > 我想要带有图像的悬停文本

html - 我想要带有图像的悬停文本

问题描述

我在这里找到了一些代码，并根据我的需要对其进行了一些更改。

我想创建一个项目列表，当您将每一行悬停时，我想在右侧显示图像，但不向上/向下滑动显示图像的文本。

到目前为止，这是我的代码：

https://jsfiddle.net/nikolaf/p65vwbeL/6/

.papers {
}

.hoverinfo {
  cursor: pointer;
}

.hoverinfo .eachpaper {
  display: none;
  color: #000000;
}

.hoverinfo:hover .eachpaper {
  margin-left:115px;
  display: block;
}
<div class="papers">

<div class="hoverinfo"> my image 1
    <div class="eachpaper"><img src="https://yogifil.la/175/200" /></div>
</div>


<div class="hoverinfo"> my image 2
    <div class="eachpaper"><img src="https://yogifil.la/190/234" /></div>
</div>

</div>

先感谢您

标签： htmlcssimage

解决方案

你也可以试试这个：

    .hoverinfo {
       cursor: pointer;
       position:relative;
     }

     .hoverinfo .eachpaper {
        opacity:0;
        color: #000000;
        position:absolute;
        top:0;
        left:100px;
        transition:0.3s ease-in-out;
     }

     .hoverinfo:hover .eachpaper {
      opacity:1;
     }

不透明度也增加了更平滑的过渡，这总是很好！

推荐阅读