html - 悬停时不显示文本,css
问题描述
当我将鼠标悬停在 img 上时,我试图让 p 元素出现。现在,什么也没有发生。该页面实际上以可见的文本开头,这让我认为 transform 属性实际上并没有做任何事情。我将包含此页面的所有代码。标头代码可能不是必需的,但我将其包括在内,以防它以某种方式干扰。
我在这里查找了类似的问题(其中一个我问过),但我似乎找不到答案。尝试了不同的浏览器 - 没有运气。
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.inner-header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
.logo-container {
height: 100%;
display: table;
float: left;
}
.logo-container h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;
}
.logo-container h1 span {
font-weight: 800;
}
.navigation {
float: right;
height: 100%;
}
.navigation a {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-size: 16px;
}
.navigation a:last-child {
padding-right: 0;
}
.mission {
width: 80%;
height: 350px;
margin: 5px auto;
position: relative;
}
.mission p {
position: absolute;
font-size: 30px;
bottom: 50%;
left: 25%;
transform: scale(0);
transition: .25s ease-in-out
}
.mission img:hover+.mission p {
transform: scale(3);
transform-origin: center;
}
.mission img {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Grid2.css">
<title>Awesome Website</title>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<h1>MY<span>SITE</span></h1>
</div>
<ul class="navigation">
<a>
<li>Home</li>
</a>
<a>
<li>About</li>
</a>
<a>
<li>Portgolio</li>
</a>
<a>
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="mission">
<img src="./330px-GABRIEL_VELLA_vs_ROMINHO_51.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nesciunt ratione animi facilis. Quo, et?</p>
</div>
</body>
</html>
我希望文本在我悬停时出现。现在,文本停滞不前。
解决方案
您的p
元素选择器错误。它不是:
.mission img:hover+.mission p
... 但:
.mission img:hover+p
但是,在悬停p
元素溢出后img
,还需要添加它pointer-events: none
,p
这样它就不会消失(因为不再有悬停在 上img
)。
片段
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.inner-header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
.logo-container {
height: 100%;
display: table;
float: left;
}
.logo-container h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-size: 32px;
font-weight: 200;
}
.logo-container h1 span {
font-weight: 800;
}
.navigation {
float: right;
height: 100%;
}
.navigation a {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-size: 16px;
}
.navigation a:last-child {
padding-right: 0;
}
.mission {
width: 80%;
height: 350px;
margin: 5px auto;
position: relative;
}
.mission p {
position: absolute;
font-size: 30px;
bottom: 50%;
left: 25%;
transform: scale(0);
transition: .25s ease-in-out;
pointer-events: none;
}
.mission img:hover+p {
transform: scale(3);
transform-origin: center;
}
.mission img {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Grid2.css">
<title>Awesome Website</title>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<h1>MY<span>SITE</span></h1>
</div>
<ul class="navigation">
<a>
<li>Home</li>
</a>
<a>
<li>About</li>
</a>
<a>
<li>Portgolio</li>
</a>
<a>
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="mission">
<img src="./330px-GABRIEL_VELLA_vs_ROMINHO_51.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nesciunt ratione animi facilis. Quo, et?</p>
</div>
</body>
</html>
推荐阅读
- python - JSONtoCSV 与 python(嵌套 json)
- ios - 在 xcode 项目中使用未解析的标识符“单元格”
- regex - 如何通过不包括“/”来选择图像 URL?
- javascript - 如何检查 Node.JS AWS Lambda 数据?
- java - 如何用 JSP 调用变量?
- mysql - 在 WHERE IN 的两侧使用 TRIM、REPLACE 和另一个 REPLACE 加速 MySQL SELECT 查询
- ruby - Prometheus 摘要不会刷新它们的值
- raspberry-pi - 从 CAN 总线到 IP 的协议转换
- python-2.7 - Python HBase:过滤数据库时忽略输入值的大小写
- splunk - Splunk 条件重复数据删除和其他过滤器