出于某种原因，当文本从屏幕上移开时，我无法隐藏它。 例如，我有一个隐藏在屏幕外的矩形，但即使在页面应该结束(页面的两侧)之后矩形仍然可见，这很奇怪。我以前解决过这个问题，但我忘记了。
代码:
<!DOCTYPE html>
<html>
<header>
<title>RNS|Blog</title>
</header>
<head>
</head>
<body>
<style>
#tuti {
margin-left: 1000px;
margin-right: 0;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
float: left;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
#tuti {
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
margin-top: 30px;
}
.right {
float: right;
}
}
</style>
<h1 class="right", id="tuti"><a>really nice server I blog</a></h1>
</body>
<footer>
</footer>
</html>
JSFiddle:https://jsfiddle.net/eobwtvxL/
最佳答案
主要原因是a标签内的文字有宽度，h1标签应该设置为overflow:hidden。此外，在 h1 上设置 position:absolute 会将其从文档流中移除，并允许您将其放置在任何位置而不会影响相邻元素。这是清理后的 CSS:
#tuti {
overflow:hidden;
position:absolute;
right:30px;
top:30px;
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
position:absolute;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
清理 fiddle :
https://jsfiddle.net/eobwtvxL/1/
你还需要解决这个问题:
<h1 class="right", id="tuti">
没有逗号:
<h1 class="right" id="tuti">
关于html - 为什么文本在关闭页面时不隐藏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29337719/