Ori*_*n31 1 html css transition
当我遇到即使谷歌无法解决的问题(不是一个好兆头)时,我只是为了好玩而制作随机HTML的东西.当我在不同的地方盘旋时,我试图让文本框出现.我在google上看到了很多这样做的东西,但暗示你没有其他代码用于你正在盘旋的对象,这意味着它唯一会做的就是让文本出现,所以动画(尽管这不起作用)或者,我在标题上有动画,它将会悬停在上面.这是我的代码:
在我的代码中:我想将鼠标悬停在h1块上并使h3块出现.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body style="font-family:'Myriad Pro' ">
<div class="title">
<h1 class="title">Random Thing</h1>
<h3 class="ps">Playing around in HTML!</h3>
</div>
</body>
</html>
CSS:
h1.title{
font-size: 100px;
background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 5.6s ease, 3s transform;
}
h1.title:hover{
background-position: left;
transform: translateX(150px)
<!-- Where the .ps would appear -->
}
.ps{
visibility: hidden;
}
就个人而言,我认为其他人会有这个问题.
感谢您的时间,Orion31
小智 5
您可以使用相邻的兄弟组合+:https: //www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
h1.title:hover + .ps {
visibility: visible;
}
| 归档时间： |
|
| 查看次数： |
2687 次 |
| 最近记录： |