2026, 새로운 도약을 시작합니다.

제이쿼리 버튼 addClass / mouseenter 관련 질문

2948673997_1640504456.2852.jpg 

이 이미지에서 소개/체험/이벤트~ (.r_nav li p) 부분은

숫자 1,2,3~ (.r_nav a)에 마우스오버했을때만 보이게 하고 싶은데요

제이쿼리 addClass removeClass를 적용해서 해봤는데도 안돼서

뭐가 틀린건지 알려주시면 정말 감사하겠습니다!

소스들은 밑에 첨부하였습니다

< CSS >

2948673997_1640504613.8727.jpg

< html > 

2948673997_1640504652.2337.jpg

< 제이쿼리 >

2948673997_1640504673.641.jpg

답변 1개

코드를 텍스트로 남겨주거나, https://codepen.io/https://jsfiddle.net/ 등과 같은 곳에 올려주면 모두에게 도움이 되었겠죠?

텍스트 부분은 inline-block이 아닌, none으로 해야 기본적으로 숨겨지겠죠?

988537230_1640515351.3363.png

곧바로 실행이 아니니, 빨간색 부분은 지워야겠죠?

그리고, mouseenter() 이벤트 관련해서는 아래 참고하면 됩니다.

988537230_1640515439.0202.png

- https://api.jquery.com/mouseenter/

li가 배경이라 p 부분을 숨겼다가 하나라도 보여주면 아래처럼 나오겠네요.

988537230_1640517850.7615.png

보여지고 숨겨지고 때문에 들쭉날쭉 할 수 있겠네요.

988537230_1640518034.15.png 988537230_1640518041.0513.png

그리고 텍스트 부분에는 링크가 없으니 클릭 불편하겠네요.

988537230_1640518254.3763.png

* 어쨌거나 이런 효과. CSS만으로도 가능합니다.

- https://codeconvey.com/Tutorials/css-show-text-on-hover/

:

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고