-1

I am newbie with html css and here is my problem.

I want to hide a block, then when I use an animation, it will show this block.

I refer a website and it tell me that I should use a CSS Pseudo Classes.

I tried it and at my 1st animation, I successfully to display the image.

Here is the code of the 1st animation

html code :

<div class="header__qr">
      <img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
      <div class="header__qr-apps">
      <a href="" class="header__qr-link">
      <img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
      </a>
      <a href="" class="header__qr-link">
      <img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
      </a>
      </div>
      </div>

css code :

.header__qr {
    width: 190px;
    position: absolute;
    left: 0;
    top: 110%;
    padding: 8px;
    display: none;
    animation: fadeIn ease-in 1s;
}
.header__qr::before {
    position: absolute;
    left: 0;
    top: -16px;
    width: 100%;
    height: 20px;
    content: "";
    display: block;
}

and here is my 2nd animation code

<div class="header__notify">
<div class="header__img">
<img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
</div>
<div class="header__notify-info">
<span class="header__notify-name">Đăng nhập để xem Thông báo</span>
</div>
<div class="register-info">
<div class="child register-register">Đăng ký</div>
<div class="child register-login">Đăng nhập</div>
</div>
</div>

css code is here

.header__notify {
    background-color: white;
    width: 400px;
    position: absolute;
    left: 0;
    top: 110%;
    padding: 20px;
    display: none;
    animation: fadeIn ease-in 1s;
}

.header__notify::before {
    position: absolute;
    left: 0;
    top: -16px;
    width: 100%;
    height: 20px;
    content: "";
    display: block;
}

As you can see, the second code is very same as the first code, and when I delete the display:none, it display the image ? So I think that the CSS Pseudo Classes must be actived ? But it does not active as I wish.

Here is all of my code

https://github.com/anhquanjp/bai110headernotification

Could you please give me some ideas for this problem ? Thank you very much for your time.

nguyencuc2586
  • 9
  • 3

1 Answers1

1

Because that animation fadeIn set opacity 0 to 1 and header__notify has display none properity.

Add .header__navbar-item:hover .header__notify { display: block; } to your main Thong bao dropdown will work.

.header {
  height: 120px;
  background-image: linear-gradient(0, #fe6433, #f7482e);
}

.header__navbar {
  display: flex;
  justify-content: space-between;
}

.header__navbar-list {
  list-style: none;
  padding-left: 0;
  margin-top: 14px;
}

.header__navbar-item {
  margin: 0 8px;
  position: relative;
  min-height: 26px;
}

.header__navbar-item,
.header__navbar-item-link {
  display: inline-block;
  font-size: 1.3rem;
  color: var(--white-color);
  text-decoration: none;
  font-weight: 3;
}

.header__navbar-item,
.header__navbar-item-link,
.header__navbar-icon-link {
  display: inline-flex;
  align-items: center;
}

.header__navbar-item:hover,
.header__navbar-icon-link:hover,
.header__navbar-item-link:hover {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.header__navbar-item--bold {
  font-weight: 500;
}

.header__navbar-item--separate::after {
  content: "";
  display: block;
  position: absolute;
  border-left: 1px solid #ffffff;
  height: 16px;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.header__navbar-icon-link {
  color: var(--white-color);
  text-decoration: none;
}

.header__navbar-icon {
  font-size: 1.8rem;
  margin: 0 4px;
}

.header__navbar-title--no-pointer {
  cursor: text;
  color: var(--white-color);
}

.header__qr {
  width: 190px;
  position: absolute;
  left: 0;
  top: 110%;
  padding: 8px;
  display: none;
  animation: fadeIn ease-in 1s;
}

.header__qr::before {
  position: absolute;
  left: 0;
  top: -16px;
  width: 100%;
  height: 20px;
  content: "";
  display: block;
}

.header__navbar-item--has-qr:hover .header__qr {
  display: block;
}

.header__qr-img {
}

.header__qr-apps {
  display: flex;
  justify-content: space-between;
}

.header__qr-download-img {
  height: 18px;
}

.header__notify {
  background-color: white;
  width: 400px;
  position: absolute;
  left: 0;
  top: 110%;
  padding: 20px;
  display: none;
  animation: fadeIn ease-in 1s;
}

.header__notify::before {
  position: absolute;
  left: 0;
  top: -16px;
  width: 100%;
  height: 20px;
  content: "";
  display: block;
}

.header__navbar-item:hover .header__notify {
  display: block;
}

.header__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.header__notify-img {
  width: 100px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.header__notify-name {
  color: black;
  margin-top: 100px;
}

.register-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__notify-info {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.register-login,
.register-register {
  font-size: 14px;
  font-weight: bold;
  background-color: rgb(248, 245, 245);
  color: black;
  float: left;
  flex: 1;
  text-align: center;
  height: 30px;
  width: 300px;
}

.register-login:hover,
.register-register:hover {
  color: red;
  background-color: rgb(238, 227, 227);
  height: 30px;
}
:root {
  --white-color: #fff;
  --black-color: #000;
  --text-color: #333;
}

* {
  box-sizing: inherit;
}

html {
  font-size: 100%;
  line-height: 1.6rem;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}

.grid {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.grid__full-width {
  width: 100%;
}

.grid__row {
  display: flex;
  flex-wrap: wrap;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInNotify {
  from {
    display: none;
  }
  to {
    display: unset;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="./assets/css/base.css">
    <link rel="stylesheet" href="./assets/css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="assets/fonts/fontawesome-free-6.1.0-web/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100&display=swap" rel="stylesheet">
</head>

<body>
    <!-- Block element modifier -->
    <div class="app">
        <header class="header">
            <div class="grid">
                <nav class="header__navbar">
                    <ul class="header__navbar-list">
                        <li class="header__navbar-item header__navbar-item--separate">Kênh Người Bán</li>
                        <li class="header__navbar-item header__navbar-item--separate">Trở thành Người bán Shopee</li>
                        <li class="header__navbar-item header__navbar-item--has-qr header__navbar-item--separate">Tải ứng dụng
                            <div class="header__qr">
                                <img src="./assets/img/QRcode.png" alt="QR code" class="header__qr-img">
                                <div class="header__qr-apps">
                                    <a href="" class="header__qr-link">
                                        <img src="./assets/img/Googleplay.png" alt="Google play" class="header__qr-download-img">
                                    </a>
                                    <a href="" class="header__qr-link">
                                        <img src="./assets/img/apple store.png" alt="App store" class="header__qr-download-img">
                                    </a>
                                </div>
                            </div>



                        </li>
                        <li class="header__navbar-item">
                            <span class="header__navbar-title--no-pointer">Kết nối</span>

                            <a href="" class="header__navbar-icon-link">
                                <i class="header__navbar-icon fa-brands fa-facebook-square"></i>
                            </a>
                            <a href="" class="header__navbar-icon-link">
                                <i class="header__navbar-icon fa-brands fa-instagram"></i>
                            </a>
                        </li>
                    </ul>

                    <ul class="header__navbar-list">
                        <li class="header__navbar-item">
                            <a href="" class="header__navbar-item-link">
                                <i class="header__navbar-icon fa-solid fa-bell"></i> Thong bao
                                <div class="header__notify">

                                    <div class="header__img">
                                        <img src="./assets/img/xemthongbao.png" alt="xemthongbao" class="header__notify-img">
                                    </div>

                                    <div class="header__notify-info">

                                        <span class="header__notify-name">Đăng nhập để xem Thông báo</span>
                                    </div>
                                    <div class="register-info">
                                        <div class="child register-register">Đăng ký</div>
                                        <div class="child register-login">Đăng nhập</div>
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="header__navbar-item">
                            <a href="" class="header__navbar-item-link">

                                <i class="header__navbar-icon fa-solid fa-circle-question"></i> Ho tro</a>
                        </li>
                        <li class="header__navbar-item header__navbar-item--bold header__navbar-item--separate">Tro giup</li>
                        <li class="header__navbar-item header__navbar-item--bold">Dang nhap</li>
                    </ul>
                </nav>

            </div>


        </header>

        <div class="container">

        </div>

        <footer class="footer">

        </footer>
    </div>
</body>

</html>
rootShiv
  • 1,375
  • 2
  • 6
  • 21