悬停文本上的SLider

Question

我是js和jquery的新手。我怎么才能做这个东西？我有四个文本，当我悬停在每个文本上时，我需要看到两个属于特定文本的图像的滑块。如果可以的话请帮帮我。我只有以下代码：

​

.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是好的