CSS 변화는-비어 있지 된 div에 너무 늦게 나타납니다

Question

나는 100 명 필드 div의 구성지도를하고 난 호버에 필드 '박스 그림자를 변경하려면, 그래서 같은 CSS 코드가 있습니다

.field:hover { 
    box-shadow: inset 0px 0px 100px 0px rgba(255,0,0,0.3); 
} 

을

필드 div가 비어 있으면 (< div class="field" ></div>) div의 box-shadow이 즉시 호버 위에 바뀌고 모든 것이 원활하게 실행됩니다. 그러나 해당 div에 어떤 ​​콘텐츠 (예 : < div class"field" >some content</div>)를 넣으면 커서를 놓은 순간과 상자 그림자가 생기는 순간 사이에 눈에 띄는 지연이 있습니다.

내가 알아챈 또 다른 흥미로운 점은 해당 div (< div class="field" style="background-image: url(image.jpg)" ></div>)의 배경 이미지를 설정해도 비어있는 경우에도 여전히 배경 이미지가없는 div보다 빠르게 실행되지만 내부에는 일부 콘텐츠가 있다는 것입니다.

기본적으로 내 질문은 - 일부 콘텐츠가 내부 div있는 빈 div (또는 적어도 가까이에 대한) 호버 상태 변경 속도를 얻을 수있는 방법은 무엇입니까?

@edit :

그래서 정말 바이올린에 "내용 없음 내용 대"차이를 재현 할 수 있지만 필드는 기본적으로 몇 상자 그림자가있는 경우에만 문제가 나타나는지 알아 냈어. 그리고 나는 당신을 보여줄 수 있습니다 : https://jsfiddle.net/azp0w668/2/

내 프로젝트에서는 div 안에 내용이있을 때만 문제가 나타납니다 (그렇지 않으면 원활하게 실행됩니다).하지만 여기서는 div가 비어 있어도 나타나는 것처럼 보입니다. 상자 그림자가 있습니다 (차이점을 볼 수 있도록 토글 버튼을 만들었습니다)

Answer 1

안에 내용이 있는지 여부에 따라 호버 pseudoClass의 응답 속도는 변하지 않습니다.

• 당신이 전환 속성을 적용하지 않을 있는지 확인 어딘가에
• 그것은 당신의 내용이 어떻게 든 컨테이너를 타격에서 호버을 차단 가능 :
  그러나, 몇 가지 일반적인 가지를 확인합니다. 내부 콘텐츠에 pointer-events:none을 설정하여이를 테스트 할 수 있습니다.

컨테이너 하단에 패딩을 추가하고 해당 영역을 가리 키도록 시도해보십시오. 지체가 없어야하며 컨테이너보다 콘텐츠 자체와 관련이 있다는 것을 확신 할 수 있습니다.

UPDATE

내가 잠시 당신의 바이올린 연주와 실제로 브라우저가 너무 많은 것을 너무 여러 번 hover'd 요소가 변경을 다시 그릴에 문제가 될 것으로 보인다.

중간에 4-6 개의 상자에서 그림자를 제거하여 이것을 테스트 할 수 있습니다. 그림자가없는 상자에서도 지연이 발생합니다. 그림자를 반전하면 그림자가없는 4-6 개의 상자가 나타납니다.

문제는 페이지의 개별 그림자가 너무 많아서 그림자의 수를 줄이는 것입니다.

스펙의 세부 사항은 확실하지 않지만 개별적으로 그림자를 적용하는 대신 여러 요소에 대해 단일 그림자를 사용할 수있는 상위 또는 중첩 요소에 단일 그림자를 넣을 수있는 경우 도움이 될 것입니다.또는 상자 그림자 속성을 사용하지 않고 그라데이션이나 배경 이미지를 사용하여 그림자 효과를 만들 수도 있습니다.

업데이트 2

찾을 경계 이미지의 소품 사용하여, 도움이 될 수 있습니다 해킹의 비트 : https://stackoverflow.com/a/1249752/1120103