CSS :target on hover not on click - html

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"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" />
<a class="next" href="#slide2">></a>
</div>
<div class='slide' id="slide2">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" />
<a class="next" href="#slide3">></a>
</div>
<div class='slide' id="slide3">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" />
<a class="next" href="#slide4">></a>
</div>
<div class='slide' id="slide4">
<a class="prev" href="#slide3"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" />
<a class="next" href="#slide1">></a>
</div>
</div>
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</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>
Slide 1
<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>
Slide 2
<div class='slide' id="slide2">
<img src="https://i.picsum.photos/id/402/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 3
<div class='slide' id="slide3">
<img src="https://i.picsum.photos/id/1067/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 4
<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.