Slider Pure CSS => Text instead of bullets point / Hover on text to change image

问题

I'm trying to do a Pure CSS slider but I tried many options (visibility: hidden;, z-index: 11,22,33..) but I didn't find the right way to make it works.

I would like to show a default image (slide-0) until the user mousehover a link below the slider. In this screenshot, no links is hovered so the default image is displayed: https://ibb.co/dX9YBm

My objective: 5 links (button-slider) under a default image. When the user mousehover a link, the image change. Each links display it's own image. Here a screenshot with the button-2 hovered: https://ibb.co/bBg8cR => the image (slide-2) is displayed. (it's not working in real...)

When the user unhover the link, the default image must be displayed again.

Here my 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)

Here my HTML for buttons below the images of the slider:

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

For the CSS, as I told you, I tried many options but no one work well, so that why I will not share it with you because it's bad.

I would like to do something like:

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

Can you please give me an advice on that? Bests Regard,

Florian

回答1:

A pure CSS solution can be easily done with flexbox. Just set the img container as a sibling of the buttons so you can access it with the ~ general sibling combinator, then use flex-basis:100% and flex-wrap:wrap on the container so it occupies a full row, and negative order so it gets visually above the buttons.

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

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

Replace the background colors with your imgs and style as needed.

回答2:

It works perfectly in the console (without the custom css style I'm working on), but on my website 4th and 5th slide aren't displayed... kind of weird!!

   

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

来源：https://stackoverflow.com/questions/48324909/slider-pure-css-text-instead-of-bullets-point-hover-on-text-to-change-image

标签

html

css

css-selectors

hover