다중 원격 링크: 예제 및 사용 방법

원격 링크란?

원격 링크는 페이지의 다른 개체에 영향을 주는 롤오버입니다. 롤오버는 자체에도 영향을 미칠 수 있습니다. 이것은 PURE CSS로 할 수 있고, 매우 시원하고 가벼운 기술로 만들 수 있습니다.

이 예에서는 색칠된 원의 행과 이름 목록이 아래에 표시됩니다. 원을 굴리면 원과 이름이 모두 강조 표시됩니다. 마찬가지로 이름을 롤오버하면 원과 이름이 모두 강조 표시됩니다.

코드가 각 목록 항목에 고유 ID가 첨부된 매우 단순한 순서 없는 목록임을 알 수 있습니다. 물론, CSS3는 이것을 더 쉽게 만들어줄 것이고 고유한 ID의 필요성을 없애줄 것이지만, 그것은 별개의 문제이다.

<ul>
   <li id="red"><a href="#"><em>Red</em></a></li>
 <li id="yellow"><a href="#"><em>Yellow</em></a></li>
 <li id="orange"><a href="#"><em>Orange</em></a></li>
 <li id="green"><a href="#"><em>Green</em></a></li>
 <li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>

그런 다음 목록 항목에 크기와 위치에 대한 일반적인 정보를 제공합니다. 각 특정 목록 항목은 배경 이미지 및 엠의 배치에 대한 추가 정보를 가져옵니다.

ul li a {
    width: 100px;
    height: 100px;
    display: block;
}
 ul li a em {
     position: relative;
 }

 ul li#red a {
     background: url(images/red.gif) bottom center no-repeat;
 }
 ul li#red a:hover {
     background-position: top center;
 }
 ul li#red a em {
     top: 150px;
 }

여기서의 진짜 비결은 앵커 내부의 em을 상대적인 위치로 지정한 다음 상단/하단/좌측/우측 좌표로 튕겨내는 것입니다. 이렇게 하면 모든 항목이 단일 앵커 요소 안에 유지되므로 롤오버가 두 요소에서 모두 자동으로 작동합니다. 난 이 기술이 너무 좋아, 너무 어지러워. =)

[라이브 예시]

[다운로드 예제]