Hover 시 border 강조 - border-collaspse

border-collapse가 적용된 상태에서 hover시에 강조를 위해 마우스 hover 대상 객체의 border가 나타나는 형식
이 형식의 핵심은 td의 영역값을 고정하고 a tag의 위치를 absolute로 잡아서 hover 시에 border값이 나타나도록 하는데 있다.
hover시에 z-index값을 상위로 주어 border가 완전히 나타나도록하는 것이 관건이다.
ie7에서는 border-collapse가 되지 않고 있다.

스폰서 그룹 영역 상품


또 다른 형식으로 만들어 봤다. unorderd-list 형식으로 만들었다.
여기서 border-collapse를 구현하기 위해서 li를 float 시키고 margin-left:-1px을 주어 왼쪽 border를 숨겼다.
그리고 첫번째 li(first-child)의 경우 margin-left:0으로 원래 상태를 유지 시키고, li 에 position:relative를 주어 내부의 a 태그에 position:absolute 위치를 잡을 수 있게끔 했다.
hover 시에 z-index 값을 상위로 주어 a요소의 border 값이 전체적으로 나타나도록 했다.
역시 핵심은 z-index 값이다. 물론 li와 a 요소의 width값, height값은 기본적으로 들어가 있어야 한다.



							.table_app_group{table-layout:fixed;border-collapse:collapse;width:100%;}
							.table_app_group tbody tr td{border:1px solid #dcdcdc;width:195px;height:211px;position:relative;}
							.table_app_group tbody tr td a{position:absolute;top:-1px;left:-1px;width:195px;height:211px;z-index:100;border:1px solid #dcdcdc;}
							.table_app_group tbody tr td a:hover{border:1px solid #ff6100;z-index:200;}		

							ul.item_list{overflow:hidden;zoom:1;}
							ul.item_list li{float:left;border:1px solid #dcdcdc;width:195px;height:211px;position:relative;margin-left:-1px;}
							ul.item_list li:first-child{margin-left:0px;}
							ul.item_list li a{position:absolute;top:-1px;left:-1px;width:195px;height:211px;z-index:100;border:1px solid #dcdcdc;}
							ul.item_list li a:hover{border:1px solid #ff6100;z-index:200;}