CODEWITHSUNDEEP
htmlcsshover
nguyencuc2586
nguyencuc2586

Reputation: 9

can not change background color using hover

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

Upvotes: 1

Views: 554

Answers (2)

showdev
showdev

Reputation: 29168

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>

Upvotes: 2

Suraj Sanwal
Suraj Sanwal

Reputation: 790

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>

Upvotes: 0

Related Questions