Question

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

这可能吗？我发现了这个link，但也许已经有了一些新款式？

Answer 1

你需要使用：目标吗？请查看我的小提琴。

＆＃13;

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

＆＃13;

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

＆＃13;

为方便起见，我删除了next和before按钮，但再次包含它们也很简单。

CSS：悬停时的目标不是点击

1 个答案: