css] hover 를 이용해보려고..

1)
작동원리..를 이것저것 시도해서
기존에 javascript 로 구현하는 것을 css 로 묶어보려는 시도입니다.

javascript 를 쓸 수 있다면 좋겠지만,
그걸 차단시키는 editor 가 많거든요..
.. 다행히도, <style 태그는 적용되는 곳이 많더라구요.

..

2)  

<!DOCTYPE>

...

3)
일단, 저 선언이 설정 가능해야하는데요, (:hover 가 IE8 에서 가능하려면..)
되면 다행이지만, 안되는 경우도 많아서 좀 그렇네요..
(tistory 에서 쓰는 editor 의 경우에도, 선언이 안되더라구요..)

...

4)

<!DOCTYPE>

<STYLE>

div.test120821_4 { background-color:lightyellow; }

div.test120821_4[beforeTest] { counter-increment:counter120821_5; }

div.test120821_4[beforeTest]:before { content :
  counter(counter120821_5) " line " url("http://cfs.tistory.com/custom/blog/42/429787/skin/images/btn_search.gif?=274629977") " : " ; }

div.test120821_4[beforeTest]:hover:before { content : ""; }

div.test120821_4[beforeTest]:after { content : ""; }

div.test120821_4[beforeTest]:hover:after { content :
  " : " counter(counter120821_5) " line " url("http://cfs.tistory.com/custom/blog/42/429787/skin/images/btn_search.gif?=274629977") ; }

div.test120821_4[beforeTest]:hover a { background-color:orange; }
div.test120821_4[beforeTest]:hover a:focus { background-color:lightblue; }
div.test120821_4[beforeTest]:hover a:active { background-color:blue; }

 a.show120821_3_2:focus { display:none; }
a.show120821_3_2 + div { display:none; }
 a.show120821_3_2:focus + div { display:inline; } 

 a.show120821_3_3:focus { display:none; }
a.show120821_3_3 + div { display:none; }
 a.show120821_3_3:focus + div { display:inline; }

</STYLE>

<A class=show120821_3_2 href="javascript:;">2 page</A>
<DIV class=test120821_4 beforeTest>첫번째 <A class=test120821_6 href="javascript:;">첨부된</A>링크 </DIV>
<A class=show120821_3_3 href="javascript:;">3 page</A>
<DIV class=test120821_4 beforeTest>두번째 <A class=test120821_6 href="javascript:;">첨부된</A>링크 </DIV>
<A class=show120821_3_1>return to first</A>
<DIV class=test120821_4 beforeTest>세번째 <A class=test120821_6 href="javascript:;">첨부된</A>링크 </DIV>
<DIV class=test120821_4 beforeTest>네번재 <A class=test120821_6 href="javascript:;">첨부된</A>링크 </DIV>

...

5)

2 page

첫번째 첨부된링크

3 page

두번째 첨부된링크

return to first

세번째 첨부된링크

네번재 첨부된링크

...

6)
설명하자면,

지금 안보이는(?) "첫번째 첨부된 링크"와 "두번째 첨부된 링크"라는 글자는
2page 라는 링크와 3 page 라는 링크가 :active, 즉 선택되고 있을 때에 작동된다는 뜻입니다.

" a.show~ + div {~}" 으로 미리 설정한 내용에서 기본 값을 잡고,
" a.show~:focus + div {~}" 이 부분으로 설정 이후에 적용될 값을 잡는거죠.
(설정 내용처럼, 2page, 3page 라는 링크는, 선택되면 안보이는 쪽으로 바뀝니다.)

그 이전부터(?) 나오는 :before 와 :after 의
{ content : ~ } 부분은

해당 내용의 전, 후에 어떻게 표시하는 가를 서술한 것이구요.

*참고* :before 나 :after 에서 사용하는 { content: ~ } 는
보통은, "큰 따옴표"를 그림으로 표시할 때 자주 사용한다고 알고있습니다.
(좀 정신없긴 하지만, 나름 준비한 예시입니다.)

제 경우에는, 이미지와 counter 를 써서
몇번째줄(?)이라는 것을 표시했죠.

*기능 출처* http://www.w3schools.com/cssref/pr_gen_content.asp 

..

7)
그런데, 만들고나서 보다보니
chrome 에서는 :active 가 작동을 안하는겁니다.

다른 방법으로 <input type=button 을 생각해봤는데요,
<input type=text 형태가 아니면 :active 가 작동하지 않더라구요.

.. 그래서, 다음 방법으로 넘어갑니다.

...

8)

<!DOCTYPE>

<STYLE>

  a.scrollDouble120825_7 {
    position:absolute; left:0px; top:0px; z-index:2; background-color:blue; width:40px; height:40px; display:block; }

  a.scrollDouble120825_7_1 { left:0px; }
  a.scrollDouble120825_7_2 { left:40px; }
  a.scrollDouble120825_7_3 { left:80px; }
  a.scrollDouble120825_7_4 { left:120px; }
  a.scrollDouble120825_7_5 { left:160px; }
  a.scrollDouble120825_7_6 { left:200px; }
  a.scrollDouble120825_7_7 { left:240px; }
  a.scrollDouble120825_7_8 { left:280px; }
  a.scrollDouble120825_7_9 { left:320px; }
  a.scrollDouble120825_7_10 { left:360px; }

  div.position120825_8 { position:absolute; left:0px; top:0px; z-index:1; }
  a.scrollDouble120825_7_1:hover ~ div.position120825_8 { left:-100px; }
  a.scrollDouble120825_7_2:hover ~ div.position120825_8 { left:-200px; }
  a.scrollDouble120825_7_3:hover ~ div.position120825_8 { left:-300px; }
  a.scrollDouble120825_7_4:hover ~ div.position120825_8 { left:-400px; }
  a.scrollDouble120825_7_5:hover ~ div.position120825_8 { left:-500px; }
  a.scrollDouble120825_7_6:hover ~ div.position120825_8 { left:-600px; }
  a.scrollDouble120825_7_7:hover ~ div.position120825_8 { left:-700px; }
  a.scrollDouble120825_7_8:hover ~ div.position120825_8 { left:-800px; }
  a.scrollDouble120825_7_9:hover ~ div.position120825_8 { left:-900px; }
  a.scrollDouble120825_7_10:hover ~ div.position120825_8 { left:-1000px; }

</STYLE>

<DIV style="POSITION: relative; OVERFLOW-X: scroll; OVERFLOW-Y: hidden; BACKGROUND-COLOR: #dddddd; WIDTH: 630px; HEIGHT: 200px">
<A class="scrollDouble120825_7 scrollDouble120825_7_1"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_2"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_3"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_4"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_5"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_6"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_7"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_8"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_9"></A>
<A class="scrollDouble120825_7 scrollDouble120825_7_10"></A>
<DIV class=position120825_8>
<DIV style="FILTER: Alpha(opacity:100, FinishOpacity:50, startx:0, finishx:100, style:1); WIDTH: 1260px; BACKGROUND: none transparent scroll repeat 0% 0%; HEIGHT: 175px; OVERFLOW: hidden"></DIV></DIV></DIV>

...

9)

...

10)
.. 좀 아쉽지만 IE 에서 gradation 이 작동되지는 않네요..
*참고* http://stackoverflow.com/questions/2650891/how-to-implement-cross-browser-opacity-gradient-not-color-gradient 

그건 그렇고..

예상(?)하시다시피, 파란색 위에 마우스가 올라가있으면
각자(?)의 작동방식대로, div 의 위치를 바꾸는 방법입니다.

처음에는 + a + a .. 형식을 적용해보려다가
이것도 chrome 에서 갯수제한(?)에 걸리더라구요.

다행히, a ~ div 형식을 찾아서 (이후 형제 누구든(?) element 선택자..)
이렇게 적용을 해본겁니다.
*참고* http://css.kentucka.com/?element 

...

11)
top 값을, 맨 위에서 적용해본 counter 나, attr() 을 이용해 를 적용해보고싶었습니다만,

...

12)

<!DOCTYPE>

<style>
a.incre120830_1 { position:relative; counter-increment:incre120830_2; background-color:cyan; }
a.incre120830_1:after { content : " - " counter(incre120830_3) ". - " attr(style) ; }
</style>
<a length="20px" href=javascript:; class=incre120830_1>a</a><br/>
<a style="top:0px;" class=incre120830_1>b</a><br/>
<a class=incre120830_1>c</a><br/>

...

13)

a
b
c

...

14)
몇번을 시도해봤지만, 실패했습니다. (그래서, 적용 못(?)했죠.)

CSS3 의 이후 업뎃에 있을 예정이라고는 합니다만,
.. 아직 잘 모르겠네요.

...

15)
그러다가, padding 이라든지 margin 의 존재(응?)를 눈치챘습니다.
이거라면 가능하겠지..하는 마음(?)으로 시도했죠.

참고로, left 나 margin 의 경우에는 음수도 받습니다만,
padding 은 음수값을 받지 않습니다.

...

16)

<!DOCTYPE>

<style>
a.pad120904_1 { position:relative; left:0px; margin-left:0px; }
a.pad120904_1:after { content:attr(left); }
a.pad120904_1[left*="0"] { left:-3px; }
a.pad120904_1[left*="2"] { margin-left:-6px; }
a.pad120904_1[left*="4"] { padding-left:9px; } /* 3+6=9 */
a.pad120904_1[left*="5"] { padding-left:21px; } /* 3+6+(6+6)=21 */
</style>

<a left="024" class=pad120904_1 ></a><br/>
<a left="124" class=pad120904_1 ></a><br/>
<a left="034" class=pad120904_1 ></a><br/>
<a left="134" class=pad120904_1 ></a><br/>
<a left="025" class=pad120904_1 ></a><br/>
<a left="125" class=pad120904_1 ></a><br/>
<a left="035" class=pad120904_1 ></a><br/>
<a left="135" class=pad120904_1 ></a><br/>

...

17)

...

18)
left 와 padding, margin 을 사용할 수 있으니
3자리수..라는 형태로 사용해본겁니다.

.. 뭐, 이런 형태로 가능하니,
다른 방법으로 표현도 가능하겠죠.

..

이상의 시도를 마치고 글 마무리합니다.

...

easyBow killofki@.