Verwenden Sie "SVG-Polygon" Hover-Status zum Einblenden von div direkt nach "SVG"

Question

Gibt es eine CSS-Lösung für dieses Problem? Ich möchte in der Lage sein, div gleich nach SVG einzublenden, aber nur wenn der Benutzer das SVG-Polygon schwebt.

Der Code würde wie folgt aussehen:

<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> 

Wenn ich diese Arbeit mit SVG (nicht svg Polygon) machen möchte, würde ich css wie folgt schreiben:

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; 
} 

Answer 1

Nein, es ist nicht möglich, nur mit CSS Ursache gibt hierfür keine Wähler ist. Brauchen Sie die parent sibling zu schweben und wählen Sie dann das nächste Element mit dem Pluszeichen wie in Ihrem Beispiel.

Hier ist JS eine gute Wahl.

Update:

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

Dies sind meine 5 Cent, es zu lösen.

Answer 2

Impossible um es nur mit CSS zu tun. Es ist möglich, js (jquery) zu verwenden.

Setzen Sie Ihre Übergangswerte nur auf .hover {...}, setzen Sie das Polygon fill="none" und schalten Sie die Klasse active mit jquery um.

$(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>

Answer 3

Offenbar gibt es keine Möglichkeit, dies nur mit CSS zu tun. So löste ich das mit jQuery

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