Css 将图像悬停在另一个图像上
我对最简单的事情感到困惑，但我无法理解。当我将鼠标悬停在图像1上时，我希望图像2覆盖图像1。 因此，目标是将图像1与包含半透明颜色渐变的图像2重叠。我知道这可以通过纯CSS实现，但我需要这样 下面的CSS代码取自另一个Typo3 CMS网站，它在那里工作 然而，我似乎无法使它在Typo3网站的另一部分/元素上工作，我甚至无法使它在这样一个简单的基本HTML页面上工作Css 将图像悬停在另一个图像上,css,hover,fading,Css,Hover,Fading,我对最简单的事情感到困惑，但我无法理解。当我将鼠标悬停在图像1上时，我希望图像2覆盖图像1。 因此，目标是将图像1与包含半透明颜色渐变的图像2重叠。我知道这可以通过纯CSS实现，但我需要这样 下面的CSS代码取自另一个Typo3 CMS网站，它在那里工作 然而，我似乎无法使它在Typo3网站的另一部分/元素上工作，我甚至无法使它在这样一个简单的基本HTML页面上工作 <!DOCTYPE html> <html> <body> <style> .
<!DOCTYPE html>
<html>
<body>
<style>
.container {
height: 300px;
width: 500px;
position: relative;
background-color: red;
}
img {
position: relative;
height: 100%;
width: 100%;
}
.container .hover-second-image-over-first-image:hover {
width:100%;
height:100%;
background-image:url(image_02.jpg);
background-position:top left;
background-repeat: no-repeat;
background-size:100%;
position:absolute;
opacity:0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
</style>
<div class="container">
<div class="hover-second-image-over-first-image"></div>
<img src="image_01.jpg" />
</div>
</body>
</html>
但是我仍然想知道为什么代码以前在没有任何z-index位置的其他网站上工作…这里需要注意以下几点： 不要把你的风格放在标签里 尝试在不使用：hover状态的情况下设置要在图像上看到的层的样式，因此它必须是.container。将第二个图像悬停在第一个图像上 对所有.container元素使用：hover操作 .集装箱{ 高度：300px； 宽度：500px； 位置：相对位置； 背景色：红色； } img{ 位置：相对位置； 身高：100%； 宽度：100%； } .container。将第二个图像悬停在第一个图像上{ 宽度：100%； 身高：100%； 背景：蓝色； 不透明度：0； 位置：绝对位置； 排名：0； 左：0； z指数：10； -webkit过渡：所有0.4s易用性； -moz过渡：所有0.4s易用性； -o型过渡：所有0.4s缓解； 过渡：所有0.4s缓解； } .container:悬停。将第二个图像悬停在第一个图像上{ 不透明度：.7； }
谢谢你的帮助，但我的问题仍然存在。此CSS代码在Typo3网站中有效：。容器。将第二个图像悬停在第一个图像上：悬停{宽度：100%；高度：100%；背景图像：urlimage_02.jpg；背景位置：左上角；背景重复：无重复；背景大小：100%；位置：绝对；不透明度：0；-webkit转换：全部0.4s易用；-moz转换：全部0.4s易用；-o转换：全部0.4s易用；转换：全部0.4s易用；}我不知道它是如何工作的，为什么工作的：你的代码确实工作，但你删除了图像，并修改了代码。我的问题是，你在我的帖子中看到的CSS代码是从网站上获取的原始代码，我不知道它是如何工作的：
.container {
height: 300px;
width: 500px;
position: relative;
background-color: red;
}
img {
position: relative;
height: 100%;
width: 100%;
}
.container .hover-second-image-over-first-image {
width:100%;
height:100%;
background-image:url(image_02.jpg);
background-position:top left;
background-repeat: no-repeat;
background-size:100%;
position:absolute;
z-index:10;
opacity:0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container:hover .hover-second-image-over-first-image {
opacity:.3;
}