使用「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右邊

回答

相關問題