메뉴 항목 호버 효과가 전체 페이지 높이를 덮습니다.

Question

왼쪽 네비게이션을 개발 중입니다. 마우스를 올리면 메뉴 항목 앞에 빨간색 막대가 나타나도록 하고 싶습니다. 이는 "홈" 항목과 해당 하위 항목에 대해 작동하지만 다른 루트 항목으로 인해 마우스를 올리면 빨간색 막대가 페이지의 전체 너비를 위에서 아래로 확장하게 됩니다.

으아아아 으아아아 으아아아

빨간색 막대가 메뉴 항목의 높이에만 걸쳐지도록 수정하는 방법은 무엇입니까?

Answer 1

CSS를 변경하고 거기에 댓글을 추가했습니다. DOM 구조를 기반으로 한 CSS 선택기에 문제가 있습니다

.left-bar.vertical.menu li 而不是 .left-bar .vertical.menu > li ，我删除了空格和 > ，以便所有 li 이제 모두 상대 위치를 갖습니다

으아아아 으아아아 으아아아

Answer 2

처음에는 빨간색으로 테두리를 흰색으로 설정했습니다.

내가 변경한 내용:

• 모든 위치 관련 CSS를 포함하여 불필요한 CSS를 모두 제거하세요. 물건
• 내가 "깨지기 쉽다"고 생각하는 일부 [href] 대신 클래스를 사용하세요
• 명확하게 설명하기 위해 구체적인 내용으로 변경 background-color
• 0 테두리를 설정한 다음 왼쪽 테두리의 세부 정보를 추가하세요
• rem 而不是 px ，因为典型的浏览器使用 16px = 1rem 사이즈 베이스를 사용하세요. 필요한 경우 그렇지 않은 사람들을 위해 강제로 지원을 할 수 있습니다.

컨테이너에 테두리가 계속 있고 CSS를 사용하여 이와 관련된 작업을 수행하려면 다음과 같이 하위 항목을 결정할 수 있습니다. 하위 항목에 마우스를 올렸을 때 상위 요소의 스타일을 지정하는 방법은 무엇입니까? 아니면 간단한 JavaScript를 사용하여 도움을 받을 수도 있습니다.

으아악 으아악 으아악