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

Question

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

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

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

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>

提前谢谢你

Answer 1

试试这个小提琴。只有您需要使用位置属性来解决此问题。

.papers {
}
.hoverinfo {
position:relative;
cursor: pointer;
}
.hoverinfo .eachpaper {
position:absolute;
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>

https://jsfiddle.net/Sampath_Madhuranga/p65vwbeL/16/

谢谢。

Answer 2

您也可以尝试以下操作：

.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;
}

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

Answer 3

你给的小提琴看起来有点挑剔。您最好使用左侧的ul/li创建一个列表，并使用：hover在右侧显示图像。只是一个建议！

看看这个：

ul li {
list-style-type: none;
vertical-align: top;
min-width: 250px
}
.pix li.image span {
margin-left: 0px;
}
.pix li img.image {
display: none;
margin-left: 150px;
top: 20px;
position: absolute;
}
li:hover img.image {
vertical-align: top;
display: inline-block;
}

<ul class="pix">
<li><span>image1</span><img class="image" src="https://yogifil.la/175/200"></li>
<li><span>image2</span><img class="image" src="https://yogifil.la/190/234"></li>
<li><span>image3></span><img class="image" src="your source"></li>
</ul>