javascript - 悬停文本上的 slider

Question

我是 js 和 jquery 的新手。我怎样才能做这个东西？我有四个文本，当我将鼠标悬停在每个文本上时，我需要看到 2 个属于特定文本的两个图像的 slider 。如果可以，请帮助我。我只有这段代码:

.pic {
  background-image: url(img/scr-img/1.png);
  width: 236px;
  height: 420px;
  transition: 1s;
  background-size: cover;
}

p1:hover~.pic {
  background-image: url(img/scr-img/8.png);
}

p2:hover~.pic {
  background-image: url(img/scr-img/9.png);
}

p3:hover~.pic {
  background-image: url(img/scr-img/11.png);
}

p4:hover~.pic {
  background-image: url(img/scr-img/5.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p1>
  <p>text1</p>
</p1>
<p2>
  <p>text2</p>
</p2>
<p3>
  <p>text3</p>
</p3>
<p4>
  <p>text4</p>
</p4>
<div class="pic"></div>

Answer 1

你可以这样做

<p1>
    <p>text1</p>
</p1>
<div class="pic"></div>
<p2>
    <p>text2</p>
</p2>
<div class="pic"></div>
<p3>
    <p>text3</p>
</p3>
<div class="pic"></div>
<p4>
    <p>text4</p>
</p4>
<div class="pic"></div>

// css 

.pic {
  transition: 1s;
  background-size: cover;
}

p1:hover+.pic {
  width: 236px;
  height: 420px;
  background-image: url(img/scr-img/8.png);
}

p2:hover+.pic {
  width: 236px;
  height: 420px;
  background-image: url(img/scr-img/9.png);
} 

p3:hover+.pic {
  width: 236px;
  height: 420px;
   background-image: url(img/scr-img/11.png);
}    

p4:hover+.pic {
  width: 236px;
  height: 420px;
  background-image: url(img/scr-img/5.png);
} 

只需确保图片 url 正确