javascript - Hover effect only on letter (not container) -


i have huge text , trigger color change when letters hovered. means white background shouldn't trigger hover effect, black fiill of letter should trigger it.

the default hover effect triggered when text container hovered :

* {margin: 0;padding: 0;}  p {    font-size: 75vw;    line-height: 100vh;    text-align: center;  }  p:hover {    color: darkorange;  }
<p>so</p>

using text element in svg acts same way :

text:hover{      fill:darkorange;  }
<svg viewbox="0 0 100 100">      <text x="0" y="50" font-size="70">so</text>  </svg>

is there way trigger hover effect when fill of letters (black parts in examples) hovered , not on containing box?

you can use inkscape convert text path via path>object path or path>stroke path. once text path hover default operate on rendered parts of path.

i.e. you'd need edit document itself, it's not svg directly supports although is being considered upcoming svg 2 specification.


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -