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

尝试这个小提琴。只需要使用position属性来解决此问题。

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

我想将文字与图片悬停

3 个答案: