정렬되지 않은 목록의 링크 간 간격 제거

Question

이것은 무언가 간단해야하지만, 나는 그것을보고 있지 않으며 약간의 조언을 부탁드립니다.

다른 링크 위로 마우스를 가져 가면 다른 이미지가 나타나도록 CSS를 적용했습니다. 이미지 중 하나는 기본적으로 백그라운드 jpg 이미지의 일부입니다. 다른 모든 이미지는 해당 링크 위로 마우스를 가져 가야 나타납니다.

문제 : 커서를 왼쪽 또는 오른쪽으로 링크 행을 따라 또는 위아래로 수직으로 밀어 넣으면 링크 사이에 약 4px 정도의 간격이 있습니다. 커서가 틈새 위에 있으면 링크가 효과적이지 않으므로 이미지가 맨 위에 나타나지 않고 배경 이미지가 표시되어 일종의 깜박임을 만듭니다.

질문 : 어떻게 링크 사이의 간격을 제거하여 커서가 링크 위로 움직일 때만 배경 이미지가 보이도록 할 수 있습니까?

미리 감사드립니다.

Answer 1

작은 차이가있는 이유는 두 요소 사이에 줄 바꿈 또는 여러 공백이 있으면 브라우저가 모든 요소를 ​​하나의 공간으로 축소하기 때문입니다. 당신이보고있는 바로 그 공간.

<div id="hero-links-container"> 
<ul> 
    <li> 
     <a href="" id="hero-link-pianos"><div id="hero-image-piano"></div>Pianos</a><a href="" id="hero-link-woodwinds"><div id="hero-image-woodwinds"></div>Woodwinds</a><a href="" id="hero-link-percussion"><div id="hero-image-percussion"></div>Percussion</a><a href="" id="hero-link-music-education"><div id="hero-image-music-education"></div>Music Education</a><a href="" id="hero-link-brasswinds"><div id="hero-image-brasswinds"></div>Brasswinds</a><a href="" id="hero-link-strings"><div id="hero-image-strings"></div>Strings</a><a href="" id="hero-link-accessories"><div id="hero-image-accessories"></div>Accessories</a><a href="" id="hero-link-recorded-music"><div id="hero-image-recorded-music"></div>Recorded Music</a> 
    </li> 
</ul> 
</div>