Refilon Refilon - 6 months ago 21
HTML Question

CSS :target on hover not on click

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?

FIDDLE

Answer

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

Comments