想知道是否有人能帮忙。我正在建设一个网站页面称为“服务”。我有一个图像列-鼠标悬停在图像上，图像应该成为半透明的中心，一个服务名称的文本框应该出现。透明度功能工作正常，但当鼠标悬停在每个图像上时，服务名称仅显示在第一个顶部图像上。下面是我的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的样式