禁用文字悬停效果

Question

So I am trying to disable the "hover" state of a text tspan tag. I have an element below that already has an hover state and whenever I place the mouse over the text the hover effect "flashes". I want the text to be ignored in the hover state.

See in this example , the "Morbihan" area, when we place the mouse over the text "Morbihan", the hover effect of the area flashes. The same happens to the tooltip, I want to disable that effect, when hovering the text just continue with the tooltip and highlight color of the area.

http://jsfiddle.net/neveldo/jh4jzyhw/

So far I only disabled the text cursor:

    tspan {
        cursor: default;
    }

Thank you.

Answer 1

I think you're looking for pointer-events:none; on the text element.

text {
    pointer-events:none;
}

Note that applying that styling to the tspan will not work. If you need to do that, you'll need to use jQuery to apply the style to the parent text element. Something like $('tspan').parent().css({ pointerEvents: 'none' }); (pseudo-code, untested)

http://jsfiddle.net/daveSalomon/jh4jzyhw/155/