cursor

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

cursor 는 마우서 커서를 지정합니다.
화살표, 십자선, 모래시계등 .. 아 모래시계는 옛날 이야기 인가요..
등으로 커서를 바꾸어 줍니다. ^^;

예제 1
아래에 마우스를 올려보세요
보기
auto crosshair default pointer
e-resize w-resize s-resize n-resize
se-resize nw-resize ne-resize sw-resize
text wait help 자가복제 마우스
클릭해 보세용
설명

- 위 예제의 커서 이름을 사용하면 됩니다.
- cursor : 커서이름
- cursor : pointer

- 자가복제 마우스도 한번 눌러보세요 ㅎ (제이쿼리 공작소를 오픈하면 다르겠습니다)

예제 2
resize 마우스 커서 이름의 유래(?)
보기
nw-resize
북서
n-resize
ne-resize
북동
w-resize

그렇군! (↑마구클릭)
e-resize
sw-resize
남서
s-resize
se-resize
남동
설명
- 동서남북의 앞글자를 의미합니다.
- east, west, south, north

- 가운데 얼굴에 제이쿼리로 장난좀 쳐 봤습니다. ^^; (클릭해 보세용)
연구 1
제이쿼리와 crosshair 마우스 커서로 놀아보기(?) - 벽을 조준후 클릭해서 파괴하세요.
보기


소스
<script type="text/javascript">

    function explode(o){
        $(o).effect('explode', 500, function(){
            $(o).show();
        });
    }

</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : crosshair;
    }
</style>

<div class="css_test">
    <img src="http://superkts.com/img/css/bg0280.gif" onclick="explode(this)"/>
    <img src="http://superkts.com/img/css/bg0280.gif" onclick="explode(this)"/>
    <img src="http://superkts.com/img/css/bg0280.gif" onclick="explode(this)"/>
    <img src="http://superkts.com/img/css/bg0280.gif" onclick="explode(this)"/><br><br>
    <img src="http://superkts.com/img/css/bg0280.gif" onclick="explode(this)" style="width:300px"/>
</div>
사용된 CSS (클릭시 보기) : cursortext-align
설명
- 어디다 쓰면 좋을까 생각하다 만들어 보았습니다.
- 재미는 없네요 ^^;