2017-10-23 16 views
0

를 초과하는 경우에만 나는 SVG 점선 호버 마우스 경로

를 내장이 jsfiddle 데모를 있는데 문제는 마우스가보기 상자에 도달 할 때 이미 트리거 그 호버 효과입니다.

svg:hover path#path-1{ 
    stroke: orange !important; 
} 

라인은 일러스트 레이터로 만들어졌습니다 : 나는 마우스 라인 자체

CSS 호버 스타일의 경로를 통해 경우에만 일어날 싶습니다.

+1

그냥 # 경로-1을 수행 한 후 가져하지만 스트로크의 꽤 큰 타격을 할 수 있습니다. –

+0

감사합니다. 경로가 너무 좁기 때문에이 문제에 대한 일종의 컨테이너를 만드는 방법이 있습니까? –

+0

물론, 똑같지 만 더 큰 획을 가지고 보이지 않는 인접한 형제 경로를 만듭니다. 숨겨진 경로 위로 마우스를 이동하면 표시된 경로에서 획을 변경합니다. –

답변

0

직접를 사용하여 시도하고 내가 그것을

#path-1:hover{ 
    stroke: orange !important; 
} 

라인이 너무 좁은 가져가 직접 당신이 밀접하게 그것을 확인해야 작동하지 않을 것이다 시험 작동합니다.

Updated Fiddle