마우스 오버 시 구분선이 제거되지 않음

StackOverflow https://stackoverflow.com/questions/19844743

  •  29-07-2022
  •  | 
  •  

문제

나는 내 웹사이트의 메뉴를 디자인하고 있어요.html/css로 변환하는 중에 문제가 발생했습니다.아이디어는 텍스트의 양쪽에 구분선을 두는 것입니다. 탐색 선 위에 마우스를 올리면 사라지고 호버 이미지가 표시됩니다.하지만 내가 무엇을 하든 그 선은 여전히 ​​한 쪽 면에 남아 있어요.

내 탐색 메뉴 이미지

nav-lnie.png:그냥 선입니다 hover .png 는 전체 마우스 오버 이미지입니다.

누구든지 이 작업을 수행하는 방법에 대한 해결책이나 설명이 있습니까?

CSS는 다음과 같습니다

.navigation{
width:370px; 
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}

.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0; 
}

.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}

.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}

그리고 HTML은 다음과 같습니다.

<div class="navigation">
    <ul>
       <li><a href="index.php">Videos</a></li>
       <li><a href="top.php">Top Videos</a></li>
       <li><a href="upload_video.php">Upload</a></li>
       <li><a href="faq.php">FAQ</a></li>
    </ul>
</div>
도움이 되었습니까?

해결책

여기에 있는 마진 코드 때문일 가능성이 높습니다.

.navigation ul li{
    background:url(../images/nav-lnie.png) repeat-y right 0;
    margin:0 2px 0 0; 
}

각 메뉴 항목의 오른쪽에는 2px 여백이 있으므로 다음 요소 위에 마우스를 올려도 왼쪽 여백이 숨겨지지 않습니다.여백이 실제로 필요하지 않은 경우 여백을 제거하면 공간이 충분하므로 제대로 작동합니다.필요한 경우 hover 명령을 사용하여 요소의 간격을 변경할 수 있습니다.

.navigation ul li a:hover{
    background:url(../images/hover.png) repeat-x;
    margin-left: -2px;
    padding-left: 2px;
}

물론 문제를 해결하는 것은 어려운 일입니다.간격은 양쪽 끝에서도 조정할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top