CODEWITHSUNDEEP
csssvgsasshover
Madzik
Madzik

Reputation: 11

Hover over svg does not work when mouse is over text within the svg item

I wanted to apply a simple hover over both the shape and text inside it. It's supposed to change the color (in this case fill), when pointer is over either the shape or the text. I thought that if the text is kind of inside of the svg element, the hover will be applied to it too. Except it isn't.

I'm not good with svg, in fact, this is the first time I'm working with them. Tried to find answers here and in google, but nothing applies to my problem. Please help.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 170">
      <path class="a" fill={funnels[funnel].bgColor} d="M378.24,59.8l33.39,88.73a11.82,11.82,0,0,0,11.07,7.66h54.6a11.82,11.82,0,0,0,11.07-7.66L521.76,59.8a11.82,11.82,0,0,0-11.07-16H389.31A11.82,11.82,0,0,0,378.24,59.8Z"></path>
      <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-family="Lato" font-size="2rem" fill="#f2f2f2"> Hello </text>
    </svg>


svg {
      filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));

      .a {
        transition: all ease-in 0.5s;

        &:hover {
          fill: darken(red, 10%);
          cursor: pointer;
        }
      }
    }

Here's my fiddle: https://jsfiddle.net/Madzik/bkbgf1os/

Upvotes: 0

Views: 1374

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

Apply hover effect to svg not .a.

svg {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));

  .a {
    transition: all ease-in 0.5s;
  }

  &:hover {
    fill: darken(red, 10%);
    cursor: pointer;
  }
}


svg {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
}

svg .a {
  transition: all ease-in 0.5s;
}

svg:hover {
  fill: green;
  cursor: pointer;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 170">
  <path class="a" fill={funnels[funnel].bgColor} d="M378.24,59.8l33.39,88.73a11.82,11.82,0,0,0,11.07,7.66h54.6a11.82,11.82,0,0,0,11.07-7.66L521.76,59.8a11.82,11.82,0,0,0-11.07-16H389.31A11.82,11.82,0,0,0,378.24,59.8Z"></path>
  <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-family="Lato" font-size="2rem" fill="#f2f2f2"> Hello </text>
</svg>

Upvotes: 1

Related Questions