Slider Pure CSS =>用文字代替项目符号点/将鼠标悬停在文字上即可更改图像 [英] Slider Pure CSS => Text instead of bullets point / Hover on text to change image
问题描述
我试图做一个纯CSS滑块,但是我尝试了很多选项(可见性:隐藏; z-index:11、22、33 ..),但是我没有找到正确的方法来使其工作.
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.
我想显示一个默认图像(幻灯片0),直到用户将鼠标悬停在滑块下方的链接上为止.在此屏幕快照中,没有链接被悬停,因此显示了默认图像: https://ibb.co/dX9YBm
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
我的目标:默认图片下有5个链接(按钮滑块).当用户将鼠标悬停在链接上时,图像会更改.每个链接都显示其自己的图像.这里的按钮2悬停在屏幕截图上: https://ibb.co/bBg8cR =>图片(显示幻灯片2). (这实际上无法正常工作...)
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.
这是我的HTML 用于图像:
<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 用于按钮:
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>
对于CSS,正如我告诉您的那样,我尝试了很多选择,但没有一个能很好地工作,所以为什么我不与您分享它,因为它很糟糕.
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.
我想做类似的事情:
#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,
弗洛里安
推荐答案
使用flexbox可以轻松完成纯CSS解决方案.只需将img容器设置为按钮的同级控件,以便可以使用~
常规同级组合器访问它,然后在容器上使用flex-basis:100%
和flex-wrap:wrap
使其占据一整行,并且为负数,这样就可以得到直观地显示在按钮上方.
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>
根据需要用您的img和样式替换背景颜色.
Replace the background colors with your imgs and style as needed.
这篇关于Slider Pure CSS =>用文字代替项目符号点/将鼠标悬停在文字上即可更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!