CSS :target on hover not on click

Question

I've got a slider, and it's working great. BUT, I've got one little problem. I want to change the slider image when I hover over one of the <li>s, and not when I click on them.

Is this possible? I've found this link, but maybe there's some new style available already?

.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

Do you need to use :target? Please check out my Fiddle.

.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>

I removed the next and before buttons for convenience, but it would also be simple to include them again.