CODEWITHSUNDEEP
csssvgcss-selectors
Gary Hayes
Gary Hayes

Reputation: 1788

CSS Selector not working as expected when SVG present

I have this JS Fiddle that works well, making my custom title display on mouseover and hide on mouseout. The problem I am having when transporting it to real world environment is that the ~ tilde selector doesn't work anymore. Is there another way to do this? My .message div is at very end of page ( as I had to close SVG tags first ), so I know the + plus selector won't work.

I realized that the real problem on my webpage as opposed to the fiddle is that my button class items are svg elements and while the tilde targeting works properly if the two elements are non svg, it doesn't work properly if one element is svg and the other isn't.

I added an svg element of the same class "button" to the Fiddle to demonstrate this issue. If anyone can show me how to properly target this, I will be most grateful.

JS Fiddle Here

.button:hover ~ .message {
    opacity: 1;
    transition: opacity .6s ease-in;
    -moz-transition: opacity .6s ease-in;
    -webkit-transition: opacity .6s ease-in;
}

Upvotes: 0

Views: 1778

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Am I missing something? Is there a reason you can't just apply class="button" to the SVG? It seems to achieve what you are after.

Demo here

Update

Instead of trying to achieve the message show with pure CSS, just use a little extra jQuery. Add a class to the message element when you mouseover "button".

$('.message').addClass("visible-message");

Then remove it again when you mouseout.

Demo here

Upvotes: 1

Related Questions