gpt4 book ai didi

javascript - 将鼠标悬停在滚动列表中的图片上

转载 作者:太空宇宙 更新时间:2023-11-04 09:25:30 25 4
gpt4 key购买 nike

我有水平滚动的图片,我希望能够将鼠标悬停在每张图片上,当我这样做时,我希望图片略微“变灰”,上面有文字。

我这辈子都想不出该怎么做。

我做了这个 fiddle 来展示我的滚动条的样子。 https://jsfiddle.net/burgoyne/u1zdn80p/1/

#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}

#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}

有人能给我指出正确的方向吗?我一直在尝试使用 CSS 进行不同的操作以将其变灰并添加文本,但没有成功。

谢谢!

最佳答案

您必须在 CSS img:hover 规则中指定您想要的内容,如下所示:

html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}

#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}

#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>

关于javascript - 将鼠标悬停在滚动列表中的图片上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41134257/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com