부모가없는 떠 다니는 자식에게만 영향을줍니다.

다음 코드는 마우스를 올려 놓을 때 모든 DOM 요소에 빨간색 그림자를 추가하는 코드입니다. 어떻게 그 요소 만 커서 아래에 표시 할 수 있습니까? https://jsfiddle.net/eapo/7Lyt9qeb/2/부모가없는 떠 다니는 자식에게만 영향을줍니다.

출처

2016-10-10 eapo

가능한 복제 [jQuery를에 깊은 아이를 선택] (http://stackoverflow.com/questions/3787924/select-deepest-child-in-jquery) – showdev

아니, 나는 완전히 다른 질문을한다. 더 명확하게 업데이 트되었습니다. – eapo

수정 해 주셔서 감사합니다. 중첩 된 요소는 어떻습니까? 커서는 한 번에 두 개 이상있을 수 있습니다. – showdev

당신은 mousemove 이벤트를 사용 document.elementFromPoint

보고 싶을의 target은 후

document.body.addEventListener("mousemove",function(e){ 
 
    // clear "hovered" class 
 
    var elems = document.getElementsByClassName("hovered"); 
 
    for(var a=elems.length-1; a>=0; a--){elems[a].classList.remove("hovered");} 
 

 
    //add "hovered" class to target 
 
    e.target.classList.add("hovered"); 
 
});

div{ 
 
    display:inline-block; 
 
    outline: 1px solid; 
 
    font-size:0px; 
 
    width:50%; 
 
    height:50%; 
 
} 
 
div.hovered{ 
 
    background-color:rgba(255,0,0,0.5); 
 
} 
 
body{ 
 
    width:400px; 
 
    height:400px; 
 
}

<body> 
 
<div> 
 
    <div> 
 
    <div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div> 
 
</body>

출처

2016-10-10 23:23:10 Isaac

이 답변에서 내 질문과 관련이 없습니다. – eapo

@eapo https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint를 보셨습니까? 그것을 마우스 좌표와 결합하면 요소가 생깁니다. – Isaac

다른 선택 사항이없는 경우에만 마우스를 사용하지 않기 때문에 커서 감지없이 원합니다. – eapo

자바 스크립트 내가 질문을 오해 호버

body:last-child:hover { 
    background: #ff0000; 
}

편집 으로 이것을 CSS 선택기를 사용하는 마지막 아이를 위해 필요하지 않습니다이되지 않습니다 : 여기에

$("html *").hover(function() { 
     $(this).css('box-shadow','inset 0 0 3px red'); 
    }, function() { 
     $(this).css('box-shadow','none'); 
    } 
); 
});

내 jsfiddle입니다 가능한 바로 여기 css 가장 jQuery 요소를 얻을 jQuery 선택기입니다.

$('body *:not(:has("*"))');

출처

2016-10-10 23:10:19 Darkrum

바디 추가 : 마지막 아이가 나를 위해 작동하지 않습니다. https://jsfiddle.net/eapo/7Lyt9qeb/1/ – eapo

죄송합니다. 내 질문에 대한 오해를 확인하십시오. – Darkrum

'body * : not (: has ("*"))'는 CSS 선택자 레벨 4 제안을 따르지 않습니다. – Oriol

대신,937 무엇이다에 두 개의 위임 된 이벤트 리스너를 추가하는 것이 좋습니다.

mouseenter 요소가 요소를 입력 할 때를 감지하는 이벤트 리스너입니다. 그것은 거품이 나지 않기 때문에 가장 깊게 매달린 요소에서만 호출됩니다.
mouseout 이벤트 리스너 이 이벤트는 마우스가 요소에서 자손으로 이동하는 경우에도 발생합니다. 의

$("html").on('mouseenter', '*', function() { 
 
    this.style.boxShadow = 'inset 0 0 5px red'; 
 
}).on('mouseout', '*', function(e) { 
 
    this.style.boxShadow = ''; 
 
    console.log(e.target); 
 
});

body { 
 
    width: 400px; 
 
} 
 
div { 
 
    min-height: 20px; 
 
    border: 1px solid; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

출처

2016-10-10 23:33:15 Oriol

아니요, 부모를 선택하고 싶지만 가장 깊은 것만 있습니다. 선택. https : // jsfiddle.net/eapo/7Lyt9qeb/3/ – eapo

@eapo "선택에서 가장 깊게"정의하십시오. – Oriol

js로 커서 아래에있는 요소 만 표시하고 싶습니다 – eapo

부모가없는 떠 다니는 자식에게만 영향을줍니다.

답변

관련 문제