CSS : hover - 낮은 DIV를 얻는 방법 : 마우스로 가리 키기?

Question

Here은 예입니다. 커서를 놓을 행과 열을 가져 오기 위해 찾고 있습니다 : 호버 특성. 자바 스크립트가 필요없이이 작업을 수행 할 수있는 방법이 있습니까? jQuery에서 행/열 수에 관계없이이 작업을 수행하는 간단한 방법이 있습니까? 테이블을 사용하는 경우

Answer 1

css와 마찬가지로 css와 마찬가지로 하나의 요소 만 나타납니다 (중첩되지 않은 겹친 요소가 인 경우 ).

이 조 구현

바인드 맞춤 ( 적절한 )를 요소로 .row 및 .col 클래스를 추가

• 하는 것이다 ..

  jQuery를 도울 수 있지만, 단순하지 않다 이벤트가 처리기의 마우스 코드가 상자 안에 있는지 확인하고 마우스 오버 상태를 설정/해제합니다.

• 마우스가 t 내부로 이동하는 동안 그는 행과 COLS의 컨테이너 이벤트 (우리가 행과 COLS에 바인딩 사용자 정의 유형의 )을 생성, (하나에서 그들을 포장한다) 및 전 세계적으로

HTML

그것을 발사

<div id="container"> 
    <div id="row1" class="row"></div> 
    <div id="row2" class="row"></div> 
    <div id="col1" class="col"></div> 
    <div id="col2" class="col"></div> 
</div> 

자바 스크립트

$('.col, .row').bind('intersect',function(e){ 
    var $me = $(this); 
    var pos = $me.offset(); 
    var size = {w:$me.width(), h:$me.height()}; 

    if (e.pageX > pos.left && e.pageY > pos.top && e.pageX < pos.left + size.w && e.pageY < pos.top + size.h) 
    { 
     $me.addClass('hover'); 
    } 
    else if ($me.is('.hover')) 
    { 
     $me.removeClass('hover'); 
    } 
}); 

$('#container').mousemove(function(e){ 
    var evt = jQuery.Event('intersect'); 
    evt.pageX = e.pageX; 
    evt.pageY = e.pageY; 
    $.event.trigger(evt); 
}); 

데모 :http://jsfiddle.net/gaby/7V8AN/

Answer 2

, 당신은 일반적으로 단지 같은 것을 할 수 있습니다 : 당신이 중첩되지 않은 요소가있는 경우

tr:hover > td { 
    background-color: yellow; 
} 

...하지만, 그 중 하나는 :hover 에드 간주됩니다. 자바 스크립트를 사용하여 아래에있는 다른 요소에 호버 상태를 전파해야합니다.

$("#row1").siblings("#row2").css(attr, value); 

또는 당신의 .class 사용하거나 그런 아무것도 수 :

Answer 3

나는 JQuery와 형제 자매를 사용합니다.