특정 li 요소가 색인으로있는 사이드 바가 있고, 각 li 요소의 호버에서 li 요소 위에 '특정'이미지가 나타납니다 (예 : position:relative;top:-25px;)호버 (hover)시 요소 사이의 공간 증가 방지
첫 번째 li 요소 위로 마우스를 가져 가면 롤오버 이미지가 잘 표시됩니다. 그러나이 호버가 발생하는 동안 1 차 및 2 차 요소 사이의 공간이 증가합니다. 왜 이런 일이 벌어지는 지 이해할 수 없으며 문제를 막으려 고합니다. 즉, 이미지는 간격 문제가없고 단지 롤오버가없는 li 항목 위에 표시되어야합니다. http://jsfiddle.net/PF35v/3/
이 경우 절대 위치 지정을 사용합니다. 일반적으로 이미지와 화면의 한쪽면에 "접착"된 상단/측면 탐색 막대를 다룰 때 대개 수행합니다. 또한, 상황에있는 내가 relative 대 absolute 내가 약간의 속임수를 사용하여 설정하고 .... 저는 여기에 위의 바이올린
ul#nav a:hover+img {
display: block;
position:relative;
top:-35px;
margin-bottom:-48px;
}
업데이트] 뿐인 변경 무엇
그러나 이미지가 모두 다른 크기 인 경우 top 및 margin-bottom 위치를 개별적으로 설정해야합니다.
이 추가 : 여기
내가 얘기하고있는 문제의 바이올린입니다 "위치 : 절대;" ul # nav a : 호버 # first_id + img는 푸시 다운 된 LI를 멈추고 있습니다 (Chrome에서이 작업을 시도했습니다). 이거 해봤 니?나팔 부리기의 해결책이 있는지 확인할 수 있습니까? 항목 중 하나에 도착 중입니다. (목록의 세 번째'li '항목) – user1240679
프론트 엔드의 물건과 거의 별반 다르지 않지만 각 항목의 절대 위치를 지정해야하는지 물어야했습니다. 웹 페이지. 이 말은 내 웹 페이지의 요소를 내 브라우저에 표시되는 위치 (절대 위치)에 수동으로 유지해야한다는 것입니다. 이러한 종류의 절대 위치 지정은 페이지의 요소와 브라우저/장치 전반에서 잘 작동합니까? 이것이 올바른 방법인가? – user1240679
도움 주셔서 감사합니다. 내 롤오버 이미지를 해당 목록 요소 위에 표시하고 마우스를 올려 놓은 각 li 요소 아래에 표시하지 않았 으면합니다. 나는 위치를 예를 들면 : top : -10px로 설정하려고 시도했다. 마우스가 올려 져있는 li 요소 위로 올지라도 나는 팔딱 빠져 나오기 시작한다. 이것을위한 어떤 해결책? – user1240679
그들은 내가 말할 수있는 것에서 각각의'li' 위에 나타납니다. 여기에 블랙 스퀘어 이미지가있는 업데이트 된 바이올린이있어서 http://jsfiddle.net/PF35v/7/을 볼 수 있습니다. 또한 하위 메뉴 목록 작업을 시작했습니다. 사이드 메뉴'ul'의 처음 두 개의'li' 요소가 스타일이 맞지 않았기 때문에 제대로 표시되지 않았습니다 –
바이올린이 내 변경 사항을 저장하지 못했던 것 같습니다. 1 초 .... 좋아, 이제 업데이트 된 바이올린을보실 수 있습니다 –