inflearn logo
강의

Course
Instructor

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Practical Publishing 03: Using the `hover` Pseudo-class (Dimming Navigation except Hovered Item)

구체성 문제인가요 ?

271

rudals8920

15 asked

1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>호버한 메뉴 외 나머지 흐려지는 네비게이션</title>
  <style>
    body {
      margin: 0;
    }
    .container {
      background-color: royalblue;
      height: 100vh;
      position: relative;
    }
    .box {
      /* border: 1px solid black; */
      width: 250px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .box a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 10px 0px 10px 30px;
      font-size: 1.5em;
      opacity: 1;
      transition: 0.5s;
    }
    .box:hover a {
      opacity: 0.3;
    }
     a:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <a href="#">New Arrivals</a>
      <a href="#">Summer Collection</a>
      <a href="#">Winter Collection</a>
      <a href="#">Special Offers</a>
      <a href="#">Trends</a>
    </div>
  </div>
</body>
</html>
a:hover하면 작동이 안되고 .box a:hover 하면 작동이되는데
이건 구체성의 차이인가요 ?
그리구 순서가 바뀌면 안되는 이유가 하나만 적용이 되는건데
왜 하나만 적용이 되는지 궁금합니다 -!

jquery HTML/CSS

Answer 2

1

codingworks

선택자를 .box a로 했으니까 호버도 .box a:hover로 하시는게 맞습니다.

선택자를 동일한 방식으로 지정하시지 않아서 그렇습니다.

그런데... 구체성이 무슨 말이죠?

0

rudals8920

아 선택자에 따라서 호버도 똑같이 해주는거구나 감사합니다.

(위의 선택자를 a로 바꿔서 동일한 선택자로 a:hover를 주었는데도 안되네요ㅠㅠ

제가 잘 못 이해 한건가요 ?)

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

1

45

5

class 값 한 번에 부여하는법

2

115

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

93

1

div#css-checker-widget의 해결방

1

93

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

113

2

강의듣는법

1

107

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

88

2

input checked 질문합니다.

0

92

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

183

2

Part 1 영상 안나옵니다

1

113

1

제이쿼리 작동이 안됩니다

1

233

3

강의 내용 질문있습니다.

1

162

2

일정 부분만 주석하는 방법

1

268

2

폰트어썸

1

171

2

인접선택자에 대한 질문드립니다!

1

151

2

delay 적용 안됨

1

149

1

rotateY(360deg)가 적용이 안됩니다!

1

216

2

세로이동할때 height값

1

164

2

폰트어썸이 안되요..

1

540

2

화면 정중앙에 오게끔 할수있나요?

1

191

1

어코디언 네비게이션 중

1

145

1

라이브서버 문제

1

268

2

넷플릭스 어코디언 예제 질문

1

121

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

179

1