Bear
10
2020-04-01 17:40:49
2
175

부트스트랩 Navbar에서 hover 색상이 dropdown에만 적용되는 이유



/* 네비게이션 영역 */
.navbar { /*배경 색상*/
    background-color: #fff;
    border-color: #000;
}
.navbar-nav li a:hover {
    color: #52a3a3;
    background: #fff;
}
.navbar-nav .nav-item a:hover {
    color: #52a3a3;
    background: #fff;
}

아래는 html 코드에요

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                SERVICES
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
     </div>

안녕하세요, 부트스트랩을 처음 써보고 있는데요, 

Navbar에 마우스를 올리면 색상이 변하도록 하고 싶습니다. 그런데 css로 색상을 적용했더니 dropdown-item에만 적용이 되고 nav-item에 적용이 안 되거든요. 어떻게 해야 nav-item hover를 어떻게 적용하면 될까요?


0
0
  • 답변 2

  • hackchoom
    4
    2020-04-01 19:42:46 작성 2020-04-01 19:47:50 수정됨

    두번째 줄을 먼저 보시면

    .navbar-nav li a:hover {
        color: #52a3a3;
        background: #fff;
    }

    nav-item에 적용을 원하시는 거라면 왜 저렇게 쓰셨는지 모르겠습니다.

    .navbar-nav li:hover 를 쓰시면 됩니다.

    nav-item 에 hover 를 했을때 a가 변하게 하고 싶으면

    nav-item:hover a { backgroun: #fff }

    이런식으로 작성하시면 될 것 같습니다.


    위아래 구문이 동일한 거네요.


    >를 사용해보세요.


    .navbar-nav > li a:hover 를 하면

    navbar-nav 자식인 li 중 그 안에있는 a를 hover  했을 때 a가 바뀐다라는 말이죠.


    .navbar-nav > li > a:hover 는 따로따로 노는 겁니다. 위와는 조금 다릅니다. 한번 해보시길 바래요~

    0
  • Bear
    10
    2020-04-22 16:57:33

    답변 넘 감사합니다!!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.