Question

我试图做一个纯CSS滑块，但我尝试了很多选项（可见性：隐藏;，z-index：11,22,33 ..）但我找不到正确的方法让它有效。

我想显示一个默认图像（slide-0），直到用户将鼠标悬停在滑块下方的链接上。在此屏幕截图中，没有链接悬停，因此显示默认图像：https://ibb.co/dX9YBm

我的目标：默认图片下的5个链接（按钮滑块）。当用户通过鼠标悬停链接时，图像会发生变化。每个链接显示它自己的图像。这里有一个按钮2的屏幕截图：https://ibb.co/bBg8cR =＆gt;显示图像（幻灯片-2）。（它不是真的......）

当用户取消链接时，必须再次显示默认图像。

此处我的HTML for images ：

<div class="slider-hp">

<div id="slide-0"><img class="slider-homepage homepage-0" src="http://www.jacquesgiral.com/wp-content/uploads/jacques-giral-photographie-accueil-paris.jpg" alt="Homepage" width="2048" height="688" /></div>

<div id="slide-1"><img class="slider-homepage archi-deco-1" src="http://www.jacquesgiral.com/wp-content/uploads/2015/06/homepage.jpg" alt="Archi Déco" width="2048" height="614" /></div>

same html structure than "slide-1" for the 4 other images (with other images, and their own ID)

此处我的HTML 按钮位于滑块图片下方：

<div class="row">
    <div class="col-md-2 col-md-offset-1">
<a  id="button-1" title="Lien vers ARCHI-DÉCO" href="https://www.jacquesgiral.com/portfolio/architecture-decoration/" rel="bookmark">1ST BUTTON</a></div>

<div class="col-md-2">same html than "button-1" structure for the 4 other buttons (with there own ID and title)</div>

对于CSS，正如我告诉你的那样，我尝试了很多选项，但没有人能够很好地工作，所以为什么我不会与你分享，因为它很糟糕。

我想做点什么：

#slide-1, #slide-2, #slide-3, #slide-4, #slide-5{
  visibility: hidden;
}
#button-1 + #slide-1{
      visibility: visible !important;
    }

你能给我一个建议吗？ Bests Regard，

弗洛里安

Answer 1

使用flexbox可以轻松完成纯CSS解决方案。只需将img容器设置为按钮的兄弟，这样您就可以使用~通用兄弟组合器访问它，然后在容器上使用flex-basis:100%和flex-wrap:wrap，使其占据整行，和负序，所以它在视觉上方的按钮上方。

＆＃13;

.flex-buttons{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

.flex-buttons button{
  flex:1;
  cursor:pointer;
}


.flex-buttons button:nth-child(1):hover ~ .imgs{
  background:red;
}

.flex-buttons button:nth-child(2):hover ~ .imgs{
  background:green;
}

.flex-buttons button:nth-child(3):hover ~ .imgs{
  background:blue;
}

.flex-buttons button:nth-child(4):hover ~ .imgs{
  background:purple;
}

.flex-buttons button:nth-child(5):hover ~ .imgs{
  background:orange;
}

.imgs{
  order:-1;
  flex-basis:100%;
  height:100px;
  border:2px solid grey;
}

＆＃13;

<div class="flex-buttons">
    <button> Image 1 </button>
    <button> Image 2 </button>
    <button> Image 3 </button>
    <button> Image 4 </button>
    <button> Image 5 </button>
    <div class="imgs"></div>
  </div>

＆＃13;

根据需要用你的imgs和样式替换背景颜色。

Answer 2

它在控制台中完美运行（没有我正在处理的自定义CSS样式），但在我的网站上没有显示第4和第5张幻灯片...有点奇怪!!

   

.flex-buttons{
  width:100%;
  display:flex;
  flex-wrap:wrap;
	background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/0-jacques-giral-photographie-accueil-paris.jpg');
	  height:450px;
	
}

.flex-buttons button{
  flex:1;
  cursor:pointer;
	margin-top:2%;
}


.flex-buttons button:nth-child(1):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/1-archi-deco.jpg');
	

}

.flex-buttons button:nth-child(2):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/2-bijoux-montre.jpg');

}

.flex-buttons button:nth-child(3):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/3-cosmetique.jpg');

}

.flex-buttons button:nth-child(4):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/4-edition.jpg');

}

.flex-buttons button:nth-child(5):hover ~ .imgs{
 background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/5-people.jpg');
   

}

.imgs{
  order:-1;
	
  flex-basis:100%;
  height:450px;
	background-size:cover;
	background-repeat: no-repeat;

  
}

<div class="flex-buttons">
    <button> <a class="button-slider" title="Lien vers ARCHI-DÉCO" href="#" rel="bookmark">ARCHI-DÉCO</a> </button>
    <button> <a class="button-slider" title="Lien vers BIJOUX-MONTRE" href="#" rel="bookmark">BIJOUX-MONTRE</a> </button>
    <button> <a class="button-slider" title="Lien vers COSMÉTIQUE" href="#" rel="bookmark">COSMÉTIQUE</a> </button>
    <button> <a class="button-slider" title="Lien vers ÉDITION" href="#" rel="bookmark">ÉDITION</a> </button>
    <button> <a class="button-slider" title="Lien vers PEOPLE" href="#" rel="bookmark">PEOPLE</a> </button>
    <div class="imgs"></div>
  </div>

Answer 3

这是一个没有动画效果的基本旋转木马。这是你想要的吗？当覆盖子弹时，会显示图片吗？

const bullets = [...document.getElementsByTagName('li')];
const images = [...document.getElementsByTagName('img')]

for (let bullet of bullets) {
  bullet.addEventListener('mouseover', () => {
    let index = 0;
    let tmp = bullet;
    while( (tmp = tmp.previousElementSibling) != null ) { index++; }
    for (let i = 0; i < images.length; i++) {
      if(i === index) { images[i].style.zIndex = 1; }
      else { images[i].style.zIndex = 0; }
    }
  });
}

.carousel {
  width: 500px;
  height: 250px;
  border: 1px solid #ccc;
  overflow: hidden;
  box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.75);
  border-radius: 5px;
  position: relative;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.carousel img:nth-child(1) {
  z-index: 1;
}

.carousel ul {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  cursor: default;
}

.carousel ul li {
  display: inline-block;
  list-style: none;
}

<div class="carousel">
  <img src="http://via.placeholder.com/500x250/bbbbbb/000000?text=Image+0">
  <img src="http://via.placeholder.com/500x250/cccccc/000000?text=Image+1">
  <img src="http://via.placeholder.com/500x250/dddddd/000000?text=Image+2">
  <ul>
    <li>o</li>
    <li>o</li>
    <li>o</li>
  </ul>
</div>

Slider Pure CSS =＆gt;文本而不是项目符号指向/悬停在文本上以更改图像

3 个答案: