mouseout 시 자식 엘리먼트 영향받지 않도록 구현

[출처] http://bum20.springnote.com/pages/3253980.xhtml

hover(over, out)

일치된 엘리먼트에 mouseover와 mouseout핸들러를 할당한다. 이 핸들러는 마우스 포인터가 오직 엘리먼트가 감싼 영역에 들어가고 나갈 때만 실행되며 자식 엘리먼트로 이동하는것은 무시된다.

 마우스 포인터가 자식엘리먼트 위를 지나갈때 반응할 필요가 없는 상황에 유리하다 

 

$(function(){

        $('#outer1').bind('mouseover',report).bind('mouseout',report);

        $('#outer2').hover(report,report);

      });

 

<div id="outer1">Outer 1<div id="inner1">Inner 1</div></div>

// 마우스 포인터가 outer1을 진입하면 over 되고 inner1에 진입하면 out후에 다시 over된다

<div id="outer2">Outer 2 <div id="inner2">Inner 2</div></div>

//outer2를 진입(over)해서 innert2에 진입해도 listener는 실행되지 않는다 outer2를 벗어나야 out된다

toggle(fn1, fn2, ..., fnN)

    클릭될 때마다 함수를 차례로 호출합니다.

toggle(listenerOdd, listenerEven)

클릭될 때마다 odd와 even을 번갈아 실행

 

한번은 불투명도를 주고 한번은 복원하는 스크립트..

일반적으로 활성 비활성에대한 내용을 처리할때 편리할듯....

$(function(){

        $('#vstar').toggle(

          function(event) {            $(event.target).css('opacity',0.4);          },

          function(event) {            $(event.target).css('opacity',1.0);          }

        );

});