想知道是否有人能帮忙。我正在建设一个网站页面称为“服务”。我有一个图像列-鼠标悬停在图像上，图像应该成为半透明的中心，一个服务名称的文本框应该出现。透明度功能工作正常，但当鼠标悬停在每个图像上时，服务名称仅显示在第一个顶部图像上。下面是我的html和css代码。提前感谢：）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Smith</title>
<link rel="stylesheet" href="../public/css/main.css">
<link rel="stylesheet" href="../public/css/services.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<img src="../public/img/logo.png" id="logo">
<div class="navbar">
<a class="active" href="home.html"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="about.html"><i class="fa fa-fw fa-id-card"></i> About</a>
<a href="projects.html"><i class="fa fa-fw fa-file-code-o"></i> Projects</a>
<a href="services.html"><i class="fa fa-fw fa-files-o"></i> Services</a>
<a href="contact.html"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>
<div style="padding-top:15%; width:100%"><h1><i>Services</i></h1></div>
<hr style="width:50%">
<div class="col1">
<img src="../public/img/productDesign.jpg">
<div class="middle">
<div class="text">Product Design</div>
</div>
</div>
<div class="col1">
<img src="../public/img/graphicDesign.jpg">
<div class="middle">
<div class="text">Digital Graphic Design</div>
</div>
</div>
<div class="col1">
<img src="../public/img/webDev.jpg">
<div class="middle">
<div class="text">Web Development</div>
</div>
</div>
<div class="col1">
<img src="../public/img/genProg.jpg">
<div class="middle">
<div class="text">General Programming</div>
</div>
</div>
<div class="col1">
<img src="../public/img/network.jpg">
<div class="middle">
<div class="text">Networking and OS</div>
</div>
</div>
</body>
</html>//CSS：
.col1 {
max-width: 100%;
}
.col1 img {
height: 100%;
width: 50%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
}
.col1:hover img {
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.col1:hover .middle {
opacity: 1;
}
.text {
background-color: black;
color: white;
font-size: 16px;
padding: 16px 32px;
}
1条答案
按热度按时间xqkwcwgp1#
不是100%确定你的问题。但它很可能是
position: absolute。因为你从来没有为父元素定义
position: relative，position: absolute总是引用下一个活动定位的父元素。在你的例子中就是身体元素。所以绝对定位元素总是在同一个位置。为了解决这个问题，给予每个
col1position:relative的样式