Use "SVG polygon" hover state to fade in div right after "SVG"

Question

Is there a css only solution for this problem? I want to be able to fade in div right after SVG, but only when user hovers SVGs polygon.

The code would look something like this:

<svg version="1.1" id="path" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 232.077 138.555" enable-background="new 0 0 232.077 138.555"
xml:space="preserve">
   <polygon fill="#FFFFFF" fill-opacity="0" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" points="3.059,134.255
3.778,17.055 24.495,24.928 178.323,3.52 229.238,16.201 229.238,89.779 "></polygon>
</svg>

<div class="hover"></div>

If I would want to make this work with SVG (not svg polygon), I would write css like this:

svg + .hover{
  opacity:0;
  -webkit-transition: opacity .3s ease;
  -moz-transition: opacity .3s ease;
  -ms-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

svg:hover + .hover{
  opacity:1;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

No it is not possible with css only cause there is no selector for this. Need would be to get on hover the parent sibling and then select the next element using the plus sign like you do in your example.

Here is JS a good choice.

Update:

$('svg polygon').hover( function(){
    $('.hover').css( 'opacity', 1 );
}, function(){
    $('.hover').css( 'opacity', 0 );
} );

This are my 5 cents to solve it.

edited May 23 '17 at 12:07

Community

1
1

answered May 04 '16 at 09:09

Jan Franta

1,691
2
16
25

Yeah, I think so too... I guess I'll need js after all. – sqarf May 04 '16 at 09:14

makonnen dos santos · Answer 2 · 2016-05-04T09:39:31.607

Impossible to do it with css only. It's possible using js (jquery).

Set your transition values only on .hover {...}, set polygon fill="none" and toggle active class with jquery.

$(document).ready(function() {     
    $('polygon').hover(function(){     
        $('.hover').addClass('active');    
    },     
    function(){    
        $('.hover').removeClass('active');     
    });
});

.hover{
  opacity:0;
  -webkit-transition: opacity .3s ease;
  -moz-transition: opacity .3s ease;
  -ms-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
  
  
  /* remove this 2 lines */
  background: blue;
  padding: 30px;
}

.hover.active{
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg version="1.1" id="path" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 232.077 138.555" enable-background="new 0 0 232.077 138.555"
xml:space="preserve">
   <polygon fill="none" fill-opacity="0" stroke="blue" stroke-width="4" stroke-miterlimit="10" points="3.059,134.255
3.778,17.055 24.495,24.928 178.323,3.52 229.238,16.201 229.238,89.779 "></polygon>
</svg>

<div class="hover"></div>

Thanks, but it's not what I asked. I want to see if there is a way to use svg's polygon tag, to affect div, what is right after svg. — sqarf, May 04 '16 at 09:01

score 0 · Answer 3 · answered May 04 '16 at 09:16

0

Apparently there is no way to do this with CSS only. This is how I solved this with jQuery

$( "svg polygon" )
    .mouseover(function() {
        $('.hover').fadeIn();
    }).mouseleave(function() {
        $('.hover').fadeOut();
});

answered May 04 '16 at 09:16

sqarf

347
1
3
13

Use "SVG polygon" hover state to fade in div right after "SVG"

3 Answers3