Question

共有4个文本。当我将鼠标悬停在每个按钮上时，我可以看到属于特定文本的特定图片。

问题是，我需要一个由图像组成的滑块。我的意思是，当我将鼠标悬停在text1上时，我需要查看我的图像，并且一秒钟后该图像必须消失。

因此，我需要对所有文本进行处理，但是在我的代码中，我只能看到一个图像，但它不是一个滑块。您可以在这个问题上帮助我吗？

这是代码：

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

<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
      <p>Text1</p>
    </div>
  </div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center wow fadeIn">
      <p>Text2</p><br><br><br>
    </div>
  </div>
</p2>
<div class="pic" style="border-radius: 20px;"></div>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
      <p>Text3</p>
    </div>
  </div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center wow fadeIn">
      <p>Text4</p>
    </div>
  </div>
</p4>

Answer 1

这不会像滑块，但是在pic div内，我们可以在悬停Texts时更改图像。我假设我们在文件夹img/src-img中拥有所有必需的图像，并且img文件夹在html页面所在的目录中。

下面的代码在Chrome中正常工作

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

<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
      <p>Text1</p>
    </div>
  </div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center wow fadeIn">
      <p>Text2</p><br><br><br>
    </div>
  </div>
</p2>

<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
      <p>Text3</p>
    </div>
  </div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
  <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
    <div class="download-content sm-center xs-center wow fadeIn">
      <p>Text4</p>
    </div>
  </div>
</p4>
<div class="pic" style="border-radius: 20px;"></div>

悬停文本时更改图像

1 个答案: