使用“SVG多边形”悬停状态在“SVG”之后淡入div右边

是否有针对此问题的CSS解决方案？我希望能够在SVG之后淡入div，但只能在用户悬停SVG多边形时使用。使用“SVG多边形”悬停状态在“SVG”之后淡入div右边

的代码会是这个样子：

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

如果我想和SVG（未SVG多边形）这项工作，我会写CSS是这样的：

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

来源

2016-05-04 sqarf

不，这是不可能的CSS只会导致没有选择这个。需要将鼠标悬停在parent sibling上，然后使用加号来选择下一个元素，就像您在示例中所做的那样。

这是JS一个不错的选择。

更新：

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

这是我5毛钱来解决它。

来源

2016-05-04 09:09:37

是的，我也这么认为......我想我会需要js毕竟。 – sqarf

不可能只用css来完成。有可能使用js（jquery）。

只在.hover {...}上设置你的过渡值，设置多边形fill="none"并用jquery切换active类。

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

来源

2016-05-04 08:58:00

谢谢，但这不是我问的。我想看看是否有一种方法可以使用svg的多边形标签来影响div，在svg之后是什么。 – sqarf

我的不好，我已经更新了我的帖子;） –

显然没有办法只用CSS做到这一点。这是我用jQuery解决这个问题的方法

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

来源

2016-05-04 09:16:59 sqarf

使用“SVG多边形”悬停状态在“SVG”之后淡入div右边

回答

相关问题