gpt4 book ai didi

css - 在 li 中具有当前图像的悬停时更改 li 元素的背景

转载 作者:行者123 更新时间:2023-11-28 13:28:17 26 4
gpt4 key购买 nike

我使用一组 li 元素制作了一个图像网格,并且需要在将鼠标悬停在 li 中的每个图像上时添加悬停效果。我让它与我设置的 .grid li a img:hover 的 css opacity 属性一起正常工作。但是,当我在这里设置背景图片时,它不会显示。加载浏览器并使用检查器显示当我将鼠标悬停在图像上时加载的图像,但在视觉上它不显示。我尝试将 z 索引设置得更高,但没有成功。

如果更好的话,我愿意采用其他方式,因为每张图片都有自己不同的悬停状态。

HTML:

<div class="container">
<ul class="grid">
<li><a href="link.html"><img src="images/image1.jpg"></a></li>
<li><a href="link.html"><img src="images/image2.jpg"></a></li>
<li><a href="link.html"><img src="images/image3.jpg"></a></li>
</ul>
</div>

CSS:

ul.grid {
list-style: none;
margin: 20px auto 0;
width: 798px;
}

.grid li {
float: left;
margin: 0px 4px 0px 0px;
}

.container {
margin-left: auto;
margin-right: auto;
margin-top:50px;
width: 513px;
}

.grid li a img:hover {
background: url(images/image1_hover.jpg) no-repeat;
}

.grid li img {
background-color: white;
margin: 0;
width: 262px;
height: 200px;
}

.grid li a {
display: block;
}

最佳答案

您遇到的问题与苹果和橙子有关。你在橘子(背景)上面有苹果(IMG)标签......所以改变背景是有效的,但你的 IMG 坐在它上面 - z-index 不会帮助你。在这种情况下单独使用背景图像。见下文。

已编辑:我看到您还希望它们成为链接。以下将为您工作。

也就是说,在这种情况下,我实际上会使用一个 Sprite 而不是 6 个不同的图像。而且,下面的 CSS 可能会被优化,并且肯定会通过使用 LESS 或 SASS 进行优化 - 但它在周五将近 4 点,而公司的微型水龙头正在流动;)

<html>
<head>
<style type="text/css">
ul.grid {
list-style: none;
margin: 20px auto 0;
width: 798px;
}

.grid li {
float: left;
margin: 0px 4px 0px 0px;
}

.container {
margin-left: auto;
margin-right: auto;
margin-top:50px;
width: 513px;
}

.grid li a {
background-color: white;
margin: 0;
width: 50px;
height:50px;
}

.grid li a {
display: block;
}

.img1 {
background: url(images/image1.jpg) no-repeat;
}

.img1:hover {
background: url(images/image1_hover.jpg) no-repeat;
}

.img2 {
background: url(images/image2.jpg) no-repeat;
}

.img2:hover {
background: url(images/image2_hover.jpg) no-repeat;
}

.img3 {
background: url(images/image3.jpg) no-repeat;
}

.img3:hover {
background: url(images/image3_hover.jpg) no-repeat;
}
</style>
</head>

<body>
<div class="container">
<ul class="grid">
<li><a href="link.html" class="img1"></a></li>
<li><a href="link.html" class="img2"></a></li>
<li><a href="link.html" class="img3"></a></li>
</ul>
</div>
</body>
</html>

关于css - 在 li 中具有当前图像的悬停时更改 li 元素的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13887680/

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