我正在尝试做一个纯 CSS slider ,但我尝试了很多选项(可见性:隐藏;z-index:11,22,33..)但我没有找到使其工作的正确方法。
我想显示默认图像 (slide-0),直到用户将鼠标悬停在 slider 下方的链接上。在此屏幕截图中,没有悬停链接,因此显示默认图像:https://ibb.co/dX9YBm
我的目标:默认图片下有 5 个链接(按钮 slider )。当用户将鼠标悬停在链接上时,图像会发生变化。每个链接都显示它自己的图像。这里有一个按钮 2 悬停的屏幕截图:https://ibb.co/bBg8cR => 显示图像(幻灯片 2)。 (它实际上不起作用......)
当用户取消悬停链接时,必须再次显示默认图像。
这是我的 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 按钮,位于 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,正如我告诉过你的,我尝试了很多选项,但没有一个效果很好,所以我不会与你分享它,因为它很糟糕。
我想做这样的事情:
#slide-1, #slide-2, #slide-3, #slide-4, #slide-5{
visibility: hidden;
}
#button-1 + #slide-1{
visibility: visible !important;
}
你能给我一个建议吗? 最好的问候,
弗洛里安
最佳答案
使用 flexbox 可以轻松完成纯 CSS 解决方案。只需将 img 容器设置为按钮的兄弟,这样您就可以使用 ~
通用兄弟组合器访问它,然后使用 flex-basis:100%
和 flex -wrap:wrap
在容器上所以它占据一整行,负序所以它在视觉上位于按钮上方。
.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 和样式替换背景颜色。
关于html - Slider Pure CSS => 文本而不是元素符号点/将鼠标悬停在文本上以更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48324909/