CSS：悬停目标而不是点击

Question

我有一个滑块，效果很好。但是，我有一个小问题。当我将鼠标悬停在其中一个<li>s 上时，我想更改滑块图像，而不是单击它们时。

这可能吗？我找到了这个链接，但也许已经有一些新的样式可用？

.slide {
  position: absolute;
  display: none;
  left: -150;
}

.next {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
}

.prev {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
}

.slider .slide:target {
  transition: 1s;
  left: 0;
  z-index: 999;
  display: block;
}

ul {
  padding-top: 250px
}

ul li:hover>a:target {
  left: 0;
  transition: 1s;
  z-index: 9999;
}

<div class='slider'>
  <div class='slide' id="slide1" style="display: block;">
    <a class="prev" href="#slide4">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" />
    <a class="next" href="#slide2">&gt;</a>
  </div>
  <div class='slide' id="slide2">
    <a class="prev" href="#slide1">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" />
    <a class="next" href="#slide3">&gt;</a>
  </div>
  <div class='slide' id="slide3">
    <a class="prev" href="#slide1">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" />
    <a class="next" href="#slide4">&gt;</a>
  </div>
  <div class='slide' id="slide4">
    <a class="prev" href="#slide3">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" />
    <a class="next" href="#slide1">&gt;</a>
  </div>
</div>
<ul>
  <li><a href="#slide1">Slide 1</a></li>
  <li><a href="#slide2">Slide 2</a></li>
  <li><a href="#slide3">Slide 3</a></li>
  <li><a href="#slide4">Slide 4</a></li>
</ul>

Answer 1

您需要使用 :target 吗？请看看我的小提琴。

.slide
{
  position: absolute;
  display: none;
  left:0;
}
ul
{
  padding-top: 50px;
  list-style:none;
}
ul li
{
  display:inline-block;
}
ul li a
{
  position:relative;
  top:-50px;
  left:0;
}
ul li a:hover + .slide
{
  transition: 1s;
  z-index: 9999;
  display: block;
}

<div class='slider'>
  <ul>
    <li>
      <a href="#slide1">Slide 1</a>
      <div class='slide' id="slide1" style="display: block;">
        <img src="https://i.picsum.photos/id/591/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide2">Slide 2</a>
      <div class='slide' id="slide2">
        <img src="https://i.picsum.photos/id/402/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide3">Slide 3</a>
      <div class='slide' id="slide3">
        <img src="https://i.picsum.photos/id/1067/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide4">Slide 4</a>
      <div class='slide' id="slide4">
        <img src="https://i.picsum.photos/id/382/450/150.jpg" width="450" height="150" />
      </div>
    </li>
  </ul>
</div>

为了方便起见，我删除了下一个和之前的按钮，但再次包含它们也很简单。