:호버를 쓰면 정신이 없어서 신경이 쓰이고 고민이에요.

5078 단어 HoverHTMLTechExpert초보자CSS
아주 사소한 부분을 고치는 방법을 생각해 보니 많은 시간이 걸렸다
시행착오를 하다.해결?한 것 같지만 무슨 원리인지 잘 모르겠어요.
나는 여전히 무대가 싫다.

하고 싶은 일.


인접한 요소에서 마우스를 하나 위에 놓으면
display: none;
또 다른 요소가 나타나다
나는 네가 나타나는 요소의 링크를 클릭하게 하고 싶다.
CSS에 설치, 마우스 스톱 표시
사이트마다 간단하게 쓰여있고 TECH 수업도 이상한 일이 없었어요.
크롬으로 열면 좀 불편해요.이것은 무엇입니까?

나는 많은 것을 조사했지만 같은 보도를 찾지 못했다
이 호버의 부분만 html로 잘라서 css 이후 속성을 끊임없이 삭감하여 테스트를 진행합니다.
결국 여기까지 했지만 개선되지 않았다.그나저나 다른 브라우저의 동작으로 사파리가 좀 깜빡거려요.Firefox가 깜박이지 않습니다.응, 알아.
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel='stylesheet' href='./test.css'>
</head>
<body>
  <div class="nickname">名前</div>
  <div class="box"><a href="#">ログアウト</a></div>
</body>
</html>
※ scss는 vseditor에 Live Sass Compiler를 추가하여 css 변환 검증을 진행합니다.
test.scss
.nickname {
  height: 60px;
  background-color: #f0f0f0;
  &:hover + .box {
    display: block;
  }
}

.box {
  background-color: skyblue;
  display: none;
  position: absolute;
  top: 2em;
  height: 50px;
}
마지막으로 생각난 건 (원래 이렇게 썼을지도 몰라...)
만약에 닉네임 요소에만 호버의 상태를 적용하면 마우스가 닉네임 요소의 범위에서 벗어날 때 박스 요소가 사라지겠죠.box:hover {display:block;}
추가해서 해결됐어.
test.scss
.box {
  background-color: skyblue;
  display: none;
  position: absolute;
  top: 69px;
  height: 50px;
  &:hover {
    display: block;
  }
}
겸사겸사 말씀드리지만, 제가 top을 바꾸려고 했습니다.
나는 쌍방의 경계 부분은 반드시 접촉하거나 중첩되어야 한다고 생각한다
알겠습니다. 1pixel이 허용된 (마우스가 1pixel의 간극박스를 초과해도 사라지지 않음) 이런 일!!
상관없어.
브라우저마다 동작이 변하기 때문에 반드시 접촉하거나 중첩해야 한다.
Java 사용 Graphql 쿼리 서비스 구축 상세 정보
HTML 정리1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage