5

I have an HTML structure like this:

<svg>
   <path/>
</svg>
<img/>

Is there a way to do something like "display:block;" to the <img/> when <path/> is hovered, with CSS only?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Dmitry
  • 5,646
  • 14
  • 33
  • 35
  • 2
    No, though depending on the actual svg and paths used, you could apply the hover to the `svg` ? – MDEV Sep 03 '13 at 14:54
  • 2
    Extra reading: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – MDEV Sep 03 '13 at 14:59
  • @SmokeyPHP Stop bringing in so many good comments so fastly I can only upvote every five seconds. :) – insertusernamehere Sep 03 '13 at 15:02
  • 3
    @insertusernamehere Haha, I do apologise! I'll try to put the brakes on my awesome :p – MDEV Sep 03 '13 at 15:05
  • SmokeyPHP, I cannot apply hover to `svg` because it is rectangular. I need hover on `path` because it is a curve. And if i put `img` after `path` Chrome renders it after the `svg`. – Dmitry Sep 03 '13 at 15:13
  • @Dmitry In which case as Pinocchio has answered, it is not possible with CSS only - however it can be achieved with JavaScript – MDEV Sep 03 '13 at 15:15
  • SmokeyPHP, I know I could do `$('path').on('mouseover',function{$('img').show()});` and `$('path').on('mouseout',function{$('img').hide()});` but CSS would work faster. – Dmitry Sep 03 '13 at 15:21
  • @Dmitry CSS would be faster if it was possible. – iConnor Sep 03 '13 at 15:22

1 Answers1

2

This is only possible if it is possible to select the parent of <path/> which unfortunately is not possible, so your answer is this is not possible.

If you would like to try this with javascript I can provide you a jQuery (not the best) example.

$('svg > path').hover(function(){
   $(this).parent().next().addClass('hover');
}, function() {
   $(this).parent().next().removeClass('hover');
});

Then in your css you can do.

img.hover{
   // These styles take effect when you hover `<path>`
}
iConnor
  • 19,153
  • 13
  • 57
  • 91
  • Note: the question as it currently stands indeed has an answer of `NO` as it specifies `CSS only`, but this can of course be achieved with JavaScript ([jQuery examples](http://stackoverflow.com/questions/8055830/select-sibling-of-parent-on-hover-with-jquery#answer-8055865)) – MDEV Sep 03 '13 at 15:13
  • @SmokeyPHP yeah, I know. – iConnor Sep 03 '13 at 15:17
  • Yea, it was more for other viewers of this answer than it was for you. – MDEV Sep 03 '13 at 15:18
  • Okey doke, added a simple jQ example – iConnor Sep 03 '13 at 15:23