Question

我是js和jquery的新手。我该怎么做？我有四个文本，当我将它们悬停在每个文本上时，我需要查看属于特定文本的2张两个图像的滑块。如果可以的话，请帮助我。我只有这段代码：

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

只需确保图片网址正确

悬停文字上的滑块

1 个答案: