CSS Slider - наведите курсор мыши на функциональность, а не на клик - PullRequest
Новая
       6

CSS Slider - наведите курсор мыши на функциональность, а не на клик

0 голосов
/ 27 сентября 2018

У меня есть слайдер CSS (код прилагается).Когда кнопки нажимаются, все работает нормально, но я бы предпочел, чтобы каждый баннер скользил, когда на них наведены кнопки.

Я пытался объединить целевые события: hover и:, но безуспешно.

Если кто-нибудь знает способ получить скользящую функцию при наведении, то это было бы здорово.

Спасибо за любую помощь.Я хотел бы добиться этого только с помощью CSS, если это возможно. 

body {
  margin: 0;
  padding: 0;
}

.slider-holder {
  width: 600px;
  height: 280px;
  background-color: yellow;
  text-align: center;
  overflow: hidden;
}

.image-holder {
  width: 3000px;
  background-color: red;
  height: 280px;
  clear: both;
  position: relative;
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  -o-transition: left 2s;
  transition: left 2s;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#slider-image-0:target~.image-holder {
  left: 0px;
}

#slider-image-1:target~.image-holder {
  left: -600px;
}

#slider-image-2:target~.image-holder {
  left: -1200px;
}

#slider-image-3:target~.image-holder {
  left: -1800px;
}

#slider-image-4:target~.image-holder {
  left: -2400px;
}

.button-holder>a>img {
  padding-left: 35px;
  padding-right: 35px;
}
<div class="slider-holder">
  <span id="slider-image-0"></span>
  <span id="slider-image-1"></span>
  <span id="slider-image-2"></span>
  <span id="slider-image-3"></span>
  <span id="slider-image-4"></span>
  <div class="image-holder">
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
  </div>
</div>

<div class="button-holder">
  <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
  <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
</div>

1 Ответ

0 голосов
/ 27 сентября 2018

Вы можете попробовать использовать некоторые переходные хаки, но вы должны изменить структуру html, чтобы иметь возможность использовать селектор брата.

Вот идея, где я использовал flexbox для того, чтобы визуально сохранить ту же структуру:

body {
  margin: 0;
  padding: 0;
}
.container {
 display:flex;
 width:600px;
 flex-wrap:wrap;
 justify-content:space-between;
}

.slider-holder {
  order:-1;
  width: 600px;
  height: 280px;
  background-color: yellow;
  text-align: center;
  overflow: hidden;
}

.image-holder {
  width: 3000px;
  background-color: red;
  height: 280px;
  clear: both;
  position: relative;
  transition: left 7000s; /*Use a big value to block the image change*/
  left: 0;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

a[href="#slider-image-0"]:hover~.slider-holder .image-holder {
  left: 0.5px; /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/
  transition: left 1s;
}

a[href="#slider-image-1"]:hover~.slider-holder .image-holder {
  left: -600px;
  transition: left 1s;
}

a[href="#slider-image-2"]:hover~.slider-holder .image-holder {
  left: -1200px;
  transition: left 1s;
}

a[href="#slider-image-3"]:hover~.slider-holder .image-holder {
  left: -1800px;
  transition: left 1s;
}

a[href="#slider-image-4"]:hover~.slider-holder .image-holder {
  left: -2400px;
  transition: left 1s;
}

.button-holder>a>img {
  padding-left: 35px;
  padding-right: 35px;
}
<div class="container">
<a href="#slider-image-0"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
<a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
<a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
<a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
<a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a>
<div class="slider-holder">
  <div class="image-holder">
    <img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" />
    <img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" />
    <img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" />
    <img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" />
    <img src="https://via.placeholder.com/600x280" class="slider-image" />
  </div>
</div>
</div>
...