html - 鼠标悬停商店滚动效果
问题描述
我想在我的图像上包含鼠标悬停“立即购买”效果,我使用了以下代码:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
但是当我在我的网站上运行它时,滚动效果同时适用于所有 3 张图像。如下所示:
我能做些什么来解决这个问题?之前有人告诉我,如果我将容器大小更改为刚好适合图像,它应该可以工作,但我该怎么做呢?
解决方案
一些简短的注释:
你不能使用style="width:300px;height:300px;" 在 css 中。在您的示例中,您的第一行应该是:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
您只能在 html 中使用样式属性,但这不是必需的。如果你这样做,它将绕过你的 css:
<div class="container" style="width:300px;height:300px;">
此外,您实际上不必同时调用宽度和高度,因为当图像具有其中之一时,它会自动缩放。
说了这么多,我相信这段代码可以解决你的问题:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
推荐阅读
- typescript - 如何在 Typescript 中继承静态泛型方法
- jboss - 如何在 Wildfly 10 上部署 Web 服务?
- javascript - 从选定的持续时间循环视频
- asp.net-mvc - IBM Watson Assistant:如何使用 ASP.NET SDK 获取和打印 JSON?
- windows - 如何获得独立于语言环境的 Windows 批处理日期戳?
- angular - 在父组件中使用没有 eventEmitter 的组件是否安全?
- python - 从巴士预订列表中提取重复行程
- c++ - 通过引用捕获并在插槽中使用的 Lambda
- php - 在 foreach 返回值之间添加分隔符
- python-3.x - 使用 Python 从数据框中删除索引