使用悬停需要帮助

Question

我有一个网站主页，就像我在下面写的那样。 （只是html和css）

         <h1> Welcome to my Page </h1>

           <h3> jhgjhadgjsadgj </h3>


               LogoLogoLogoLogo
               LogoLogoLogoLogo
               LogoLogoLogoLogo
               LogoLogoLogoLogo
               LogoLogoLogoLogo

我的计划是，当您将鼠标悬停在徽标上方时，两个标题都会消失。

然后我的第二个计划是出现一个空格，用户可以输入用户名和密码登录。

这可能吗？如果是这样的话？

Answer 1

这个问题有点广泛，但你可以用HTML和CSS做你想要的基础知识。我将在下面给出一些缩写代码。

HTML将类似于：

<div container>
     <img src="logo" />
     <h1 class="banner"> Welcome to my Page </h1>
     <h3 class="banner"> jhgjhadgjsadgj </h3>
     <form class="myform" ...>
       // login form
     </form>
</div>

CSS类似于：

.logo {
    margin-top: enough to be under the banner;
}
.banner {
    float: left;
}
.myform {
    display: none;
}
.logo:hover ~ .banner {
    display: none;
    // you can remove the margin-top if you want the logo to move up
}
.logo:hover ~ .myform {
    display: block;
}

这会设置源顺序，以便您想要影响的元素位于徽标之后，这样您就可以使用兄弟选择器来影响它们。