inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 hover 활용한 실전 퍼블리싱 02(마우스 오버되면 나타나는 툴팁 만들기)

visibility 속성 부여 여부에 따른 차이

277

귀여워솜젤링

작성한 질문수 2

1

안녕하세요 선생님

이미지 hover시 툴팁이 나오게 할 때

opacity나 transition을 넣고 싶으면

display: block, none 속성을 사용 할 수 없고

opacity속성만 사용하거나

visibility, none, visible 속성을 사용해야 한다고 하셨는데

opacity 값을 준 상태에서  visibility속성을 준 것과 안 준것의 차이가 뭔지 잘 모르겠습니다.

 20분 15초쯤에 visibility opacity값만 넣으면 이런 현상이 생긴다고 말씀하셨는데 어떤 현상을 말씀하시는 걸까요?

 

 

jquery HTML/CSS

답변 1

1

코딩웍스(Coding Works)

아래 그림을 보시면

.child2에 마우스가 올라가면 마우스 이벤트가 발생합니다.

하지만 .child3에 마우스가 올라가면 마우스 이벤트가 발생하지 않습니다.

그래서 툴팁을 할 때 툴팁이 보이지 않는 상태일 때 opacity만 있으면 마우스 이벤트가 반응합니다. 그래서 opacity와 함께 visibility을 써주어야 합니다.

opacity는 트랜지션을 위해, visibility는 마우스 이벤트가 반응하지 않기 위해서 입니다.

0

귀여워솜젤링

감사합니다!!

class 값 한 번에 부여하는법

2

95

1

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

1

79

1

div#css-checker-widget의 해결방

1

71

2

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

0

95

2

강의듣는법

1

86

1

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

1

77

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

153

2

Part 1 영상 안나옵니다

1

98

1

제이쿼리 작동이 안됩니다

1

212

3

강의 내용 질문있습니다.

1

129

2

일정 부분만 주석하는 방법

1

223

2

폰트어썸

1

144

2

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

1

135

2

delay 적용 안됨

1

137

1

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

1

190

2

세로이동할때 height값

1

142

2

폰트어썸이 안되요..

1

505

2

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

1

175

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

241

2

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

1

107

1

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

1

163

1

active 관련 질문

1

150

2