当前位置： 文江博客话题详情

无法使用悬停更改背景颜色

发布于 2025-01-18 22:15:05 字数 7965 浏览 2 评论 0原文

我试图制作 3 列，每列都有自己的背景颜色，当我们将鼠标悬停在它上面时，它会更改为另一种颜色。

我通过 header__notify-item 将该列命名为 header__notify-item，并在 main.css 中编写了如下代码：

.header__notify-item {
    display: flex;
}

.header__notify-item:hover {
    background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
    background-color: #fff2ee;
}

名为 header__notify-link-viewed 的列是已查看列。所以他们会有这种颜色。

我的问题是，当我将鼠标悬停在查看的列上时，它们的颜色不会改变。当我将鼠标悬停在未查看列上时，只有该列会改变颜色。

也许原因是因为我设置了查看列的背景颜色？因为当我删除它时，它就起作用了。

当我将此代码添加到我的代码中时，它可以工作，但代码太长，我不想这样做：

.header__notify-link-viewed:hover {
    background-color: #dad0d0 !important;
}

也许原因是 header__notify-link-viewed 和 之间的冲突header__notify-item？

我真的想通过短代码设置查看的列的背景颜色。

您能给我一些关于这个问题的想法吗？

: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;
  }
}

.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-link:nth-child(1) {
  margin-left: 11px;
}

.header__qr-link:nth-child(2) {
  margin-left: 20px;
}

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


/* header notifycation */

.header__notify {
  position: absolute;
  top: 100%;
  width: 404px;
  background-color: var(--white-color);
  right: 0;
  border: 1px solid #D3D3D3;
}

.header__notify-header {
  color: #999;
  margin: 0 0 0 12px;
  font-weight: 200;
  font-size: 0.8rem;
}

.header__notify-list {
  padding-left: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-item:hover {
  background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.header__notify-img {
  width: 48px;
  object-fit: contain;
}

.header__notify-info {
  margin-left: 12px;
}

.header__notify-name {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}

.header__notify-des {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  margin-bottom: 0.3125rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<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
          </a>
          <div class="header__notify">
            <header class="header__notify-header">
              <h3>Thông báo mới nhận</h3>
            </header>
            <ul class="header__notify-list">
              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn thân yêu ơi!</b></span>
                    <span class="header__notify-des">Để giúp Shopee hiểu & có thể đề xuất các sản phẩm phù hợp nhất đến bạn, hãy chia sẻ với Shopee về các thói quen mua sắm của bạn TẠI ĐÂY nhé!</span>
                  </div>
                </a>
              </li>



              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn nói Shopee lắng nghe!</b></span>
                    <span class="header__notify-des">Bạn có thể vui lòng dành 3 phút để trả lời một khải sát nhỏ để giúp chúng tôi hiểu hơn về trải nghiệm mua sắm của bạn trong thời gian chiến dịch của Shopee diễn ra
原文

I am trying to make 3 columns, each column has it own background color and it will change to another color when we hover to it.

I named the column by header__notify-item, and in my main.css I wrote a code like this :

.header__notify-item {
    display: flex;
}

.header__notify-item:hover {
    background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
    background-color: #fff2ee;
}

The columns named header__notify-link-viewed are viewed columns. So they will have this color.

My problem is, the viewed columns do not change color when I hover to them. Only the unview column change color when I hover to it.

Maybe the reason is because I set the background color for the viewed columns? Because when I delete it, it works.

When I add this code to my code, it works but the code too long, and I do not want to do like this:

.header__notify-link-viewed:hover {
    background-color: #dad0d0 !important;
}

Maybe the cause is the conflict between header__notify-link-viewed and header__notify-item?

I really want to set the background color for the viewed columns by the short code.

Could you please give me some ideas for this problem ?

: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;
  }
}

.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-link:nth-child(1) {
  margin-left: 11px;
}

.header__qr-link:nth-child(2) {
  margin-left: 20px;
}

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


/* header notifycation */

.header__notify {
  position: absolute;
  top: 100%;
  width: 404px;
  background-color: var(--white-color);
  right: 0;
  border: 1px solid #D3D3D3;
}

.header__notify-header {
  color: #999;
  margin: 0 0 0 12px;
  font-weight: 200;
  font-size: 0.8rem;
}

.header__notify-list {
  padding-left: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-item:hover {
  background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.header__notify-img {
  width: 48px;
  object-fit: contain;
}

.header__notify-info {
  margin-left: 12px;
}

.header__notify-name {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}

.header__notify-des {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  margin-bottom: 0.3125rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<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
          </a>
          <div class="header__notify">
            <header class="header__notify-header">
              <h3>Thông báo mới nhận</h3>
            </header>
            <ul class="header__notify-list">
              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn thân yêu ơi!</b></span>
                    <span class="header__notify-des">Để giúp Shopee hiểu & có thể đề xuất các sản phẩm phù hợp nhất đến bạn, hãy chia sẻ với Shopee về các thói quen mua sắm của bạn TẠI ĐÂY nhé!</span>
                  </div>
                </a>
              </li>



              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn nói Shopee lắng nghe!</b></span>
                    <span class="header__notify-des">Bạn có thể vui lòng dành 3 phút để trả lời một khải sát nhỏ để giúp chúng tôi hiểu hơn về trải nghiệm mua sắm của bạn trong thời gian chiến dịch của Shopee diễn ra ????</span>
                  </div>
                </a>
              </li>

              <li class="header__notify-item">
                <a href=" " class="header__notify-link">
                  <img src="https://cf.shopee.vn/file/946a87f0ddf75dc390969a7feb9b6106_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Giao kiện hàng thành công</b></span>
                    <span class="header__notify-des">Kiện hàng <b>VN2282909004952</b> của đơn hàng <b>220331CJ68Q1YU</b> đã giao thành công đến bạn.</span>
                  </div>
                </a>
              </li>




            </ul>
          </div>
        </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>

View on GitHub

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

葬シ愛 2025-01-25 22:15:05

由于 .header__notify-link-viewed 是 .header__notify-item 的子级，因此其背景将覆盖/隐藏其父级的背景。

一种解决方案是更改悬停的“项目”及其子“链接”的颜色，如下所示：

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item:hover,
.header__notify-item:hover .header__notify-link-viewed {
  background-color: #dad0d0;
}


.header__notify-list {
  margin: 0;
  padding: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item:hover,
.header__notify-item:hover .header__notify-link-viewed {
  background-color: #dad0d0;
}
<ul class="header__notify-list">
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      one
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
     two
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link">
      three
    </a>
  </li>
</ul>

但在“link”元素而不是“item”元素上设置所有背景可能更简单：

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link:hover {
  background-color: #dad0d0;
}


.header__notify-list {
  margin: 0;
  padding: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link:hover {
  background-color: #dad0d0;
}
<ul class="header__notify-list">
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      one
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      two
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link">
      three
    </a>
  </li>
</ul>

Since .header__notify-link-viewed is a child of .header__notify-item, its background will cover/hide the background of its parent.

One solution is to change colors of both the hovered "item" and its child "link", like this:

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item:hover,
.header__notify-item:hover .header__notify-link-viewed {
  background-color: #dad0d0;
}


.header__notify-list {
  margin: 0;
  padding: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item:hover,
.header__notify-item:hover .header__notify-link-viewed {
  background-color: #dad0d0;
}
<ul class="header__notify-list">
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      one
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
     two
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link">
      three
    </a>
  </li>
</ul>

But it might be simpler to set all backgrounds on "link" elements instead of "item" elements:

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link:hover {
  background-color: #dad0d0;
}


.header__notify-list {
  margin: 0;
  padding: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link:hover {
  background-color: #dad0d0;
}
<ul class="header__notify-list">
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      one
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link header__notify-link-viewed">
      two
    </a>
  </li>
  <li class="header__notify-item">
    <a class="header__notify-link">
      three
    </a>
  </li>
</ul>

回复 原文
标点 2025-01-25 22:15:05

我添加了下面的代码以解决您的问题，请检查

.header__notify-item .header__notify-link-viewed:hover {
   background-color: #dad0d0;
}


: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;
  }
}

.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-link:nth-child(1) {
  margin-left: 11px;
}

.header__qr-link:nth-child(2) {
  margin-left: 20px;
}

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


/* header notifycation */

.header__notify {
  position: absolute;
  top: 100%;
  width: 404px;
  background-color: var(--white-color);
  right: 0;
  border: 1px solid #D3D3D3;
}

.header__notify-header {
  color: #999;
  margin: 0 0 0 12px;
  font-weight: 200;
  font-size: 0.8rem;
}

.header__notify-list {
  padding-left: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-item:hover {
  background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item .header__notify-link-viewed:hover {
  background-color: #dad0d0;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.header__notify-img {
  width: 48px;
  object-fit: contain;
}

.header__notify-info {
  margin-left: 12px;
}

.header__notify-name {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}

.header__notify-des {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  margin-bottom: 0.3125rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">


<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

          </a>

          <div class="header__notify">

            <header class="header__notify-header">

              <h3>Thông báo mới nhận</h3>

            </header>

            <ul class="header__notify-list">

              <li class="header__notify-item">

                <a href=" " class="header__notify-link header__notify-link-viewed">

                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">

                  <div class="header__notify-info">

                    <span class="header__notify-name"><b>Bạn thân yêu ơi!</b></span>

                    <span class="header__notify-des">Để giúp Shopee hiểu & có thể đề xuất các sản phẩm phù hợp nhất đến bạn, hãy chia sẻ với Shopee về các thói quen mua sắm của bạn TẠI ĐÂY nhé!</span>

                  </div>

                </a>

              </li>


              <li class="header__notify-item">

                <a href=" " class="header__notify-link header__notify-link-viewed">

                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">

                  <div class="header__notify-info">

                    <span class="header__notify-name"><b>Bạn nói Shopee lắng nghe!</b></span>

                    <span class="header__notify-des">Bạn có thể vui lòng dành 3 phút để trả lời một khải sát nhỏ để giúp chúng tôi hiểu hơn về trải nghiệm mua sắm của bạn trong thời gian chiến dịch của Shopee diễn ra

I have added the code below to fix your issue please check

.header__notify-item .header__notify-link-viewed:hover {
   background-color: #dad0d0;
}


: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;
  }
}

.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-link:nth-child(1) {
  margin-left: 11px;
}

.header__qr-link:nth-child(2) {
  margin-left: 20px;
}

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


/* header notifycation */

.header__notify {
  position: absolute;
  top: 100%;
  width: 404px;
  background-color: var(--white-color);
  right: 0;
  border: 1px solid #D3D3D3;
}

.header__notify-header {
  color: #999;
  margin: 0 0 0 12px;
  font-weight: 200;
  font-size: 0.8rem;
}

.header__notify-list {
  padding-left: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-item:hover {
  background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-item .header__notify-link-viewed:hover {
  background-color: #dad0d0;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.header__notify-img {
  width: 48px;
  object-fit: contain;
}

.header__notify-info {
  margin-left: 12px;
}

.header__notify-name {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}

.header__notify-des {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  margin-bottom: 0.3125rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<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
          </a>
          <div class="header__notify">
            <header class="header__notify-header">
              <h3>Thông báo mới nhận</h3>
            </header>
            <ul class="header__notify-list">
              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn thân yêu ơi!</b></span>
                    <span class="header__notify-des">Để giúp Shopee hiểu & có thể đề xuất các sản phẩm phù hợp nhất đến bạn, hãy chia sẻ với Shopee về các thói quen mua sắm của bạn TẠI ĐÂY nhé!</span>
                  </div>
                </a>
              </li>



              <li class="header__notify-item">
                <a href=" " class="header__notify-link header__notify-link-viewed">
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Bạn nói Shopee lắng nghe!</b></span>
                    <span class="header__notify-des">Bạn có thể vui lòng dành 3 phút để trả lời một khải sát nhỏ để giúp chúng tôi hiểu hơn về trải nghiệm mua sắm của bạn trong thời gian chiến dịch của Shopee diễn ra ????</span>
                  </div>
                </a>
              </li>

              <li class="header__notify-item">
                <a href=" " class="header__notify-link">
                  <img src="https://cf.shopee.vn/file/946a87f0ddf75dc390969a7feb9b6106_tn" alt="" class="header__notify-img">
                  <div class="header__notify-info">
                    <span class="header__notify-name"><b>Giao kiện hàng thành công</b></span>
                    <span class="header__notify-des">Kiện hàng <b>VN2282909004952</b> của đơn hàng <b>220331CJ68Q1YU</b> đã giao thành công đến bạn.</span>
                  </div>
                </a>
              </li>




            </ul>
          </div>
        </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>

回复 原文
~没有更多了~

关于作者

一世旳自豪

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文