-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
실제 작동시 질문입니다.
21.01.29 19:57 작성 조회수 155
1
안녕하세요 선생님, 제이쿼리 들어와서 헷갈리는 부분이 많아서 질문남깁니다.
1. jquery를 수업내용과 같이 작성하였을때 a tag에 마우스를 올리지 않더라도 a tag 보다 넓은 실제 li 영역에 마우스를 올리면 배경은 바뀌지만 a에 적용한 hover 효과는 작동하지 않았습니다. -> 이경우에 a에 길어져도 attr을 부여하거나 jquery에 parent()를 추가해야 호버와 함께 작동할 것 같은데 맞나요? ㅠㅠ
2. 해당예제를 한글로 변환해서 만들려고 하다가 궁금한 부분이 생겼습니다. a:before에 width 값을 0으로 주고, overflow를 주기전에 영문은 예제처럼 제자리에 있는 반면, 한글은 수직아래로 떨어집니다.
이때, heigh 값을 100%로 주고 overflow를 hidden 할 경우에 영문과 비슷하게 작동하지만 마지막 글자에서 부자연스럽게 채워지게 되는데 한글 메뉴로 구성했을때 다른 해결방법이 있는지 궁금합니다.
답변을 작성해보세요.
2
코딩웍스(Coding Works)
지식공유자2021.01.30
1번 질문에 대한 답변
data-image="images/portrait-01.jpg"를 a태그 안에 넣지 않고 li에 넣은 것은 a태그 내부가 너무 길어져서 입니다.
특별한 의미는 없습니다. a로 data-image속성을 옮기면 아래 처럼 스크립트의 선택자를 바꿔주면 됩니다.
<li><a href="#none" data-image="images/portrait-01.jpg" data-text="어바웃">어바웃</a></li>
$('.navi li a').mouseenter(function(){...}
$('.navi li a').mouseleave(function(){...}
2번 질문에 대한 답변
한글의 경우나 띄어쓰기가 있는 경우 자동 줄바꿈이 일어납니다.
그래서 자동줄바꿈을 하지 않게 white-space: nowrap; 속성을 추가하시며 됩니다.
참고로 한글이 입력되면서 a와 a:before의 높이가 살짝 안맞을거에요.
이런 부분을 해결하는건 a를 inline-block으로 변경해주세요. 그래서 크기값을 갖게 해주세요.
a를 block으로 변경하지 않는건 a의 너비가 100%가 되는 것을 방지하기 위해서 입니다.
.navi li a {
display: inline-block;
}
.navi li a:before {
white-space: nowrap; /* 텍스트가 넘쳐도 자동으로 줄바꿈 하지 않음 (기본값은 normal) */
}
답변 1