刪除clipover懸停

總之，我有一個使用clipPath屏蔽的圖像，以便它可以在IE 9+中使用。問題是我需要將遮罩隱藏在懸停上以便顯示完整圖像，然後在mouseout上重新應用。我現在所用的腳本不起作用。筆包括在下面。我對SVG和clipPath很新。刪除clipover懸停

http://codepen.io/OMGDrAcula/pen/eJPzQx

$(document).ready(function() { 
 
    $('.finish') 
 
    .mouseover(function() { 
 
     $(this).find('svg').find('clipPath').css('display', 'none'); 
 
    }).mouseout(function() { 
 
     $(this).find('svg').find('clipPath').css('display', 'block'); 
 
    }); 
 
})

<div class="col-xs-3 finish" style="position:relative;border:1px solid red;"> 
 
    <img src="http://placehold.it/297x252" class="img-responsive" /> 
 
    <svg preserveAspectRatio="xMidYMin slice" style="width:100%;height:252px;top:0;left:0;position:absolute;border:dotted 2px blue" version="1.1" xmlns="http://www.w3.org/2000/svg" width="297" height="252" x="0px" y="0px" style="enable-background:new 0 0 297 252;" 
 
    viewBox="0 0 297 252" xml:space="preserve"> 
 
    <defs> 
 
     <clipPath id="maskID0"> 
 
     <rect width="100%" height="252" x="0" y="0" /> 
 
     </clipPath> 
 
    </defs> 
 
    <title>Test Image</title> 
 
    <desc>Test 123</desc> 
 
    <image clip-path="url(#maskID0)" width="297" height="252" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://placehold.it/297x252"></image> 
 
    </svg> 
 
</div>

來源

2016-02-05 OMGDrAcula

爲什麼不取消對鼠標懸停'夾path'屬性，並重新塗抹在鼠標移開？ – Harry

那麼這樣的事情？ $（。finish）.mouseover（function（）{（this）.find（'svg'）。removeAttr（「clip-path」）; }）; – OMGDrAcula

類似於[this]（http://codepen.io/hari_shanx/pen/jWeMJN）（*我修改了剪輯路徑的寬度，但您明白了*）。這有幫助嗎？ – Harry

更改clipPath元素本身的display屬性沒有任何效果，因爲clipPath只是一個定義，它並沒有自己的任何顯示。它是在被定義的clipPath剪輯後顯示的image。因此，一個簡單的解決方案就是在鼠標移除時只刪除clip-path屬性，然後在鼠標移出時再次將其添加（連同原始剪輯路徑URL）。

$(document).ready(function() { 
 
    $('.finish').mouseover(function() { 
 
    $(this).find('svg image').removeAttr('clip-path'); 
 
    }).mouseout(function() { 
 
    $(this).find('svg image').attr('clip-path', 'url(#maskID0)'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-3 finish" style="position:relative;border:1px solid red;"> 
 
    <img src="http://placehold.it/297x252" class="img-responsive" /> 
 
    <svg preserveAspectRatio="xMidYMin slice" style="width:100%;height:252px;top:0;left:0;position:absolute;border:dotted 2px blue" version="1.1" xmlns="http://www.w3.org/2000/svg" width="297" height="252" x="0px" y="0px" style="enable-background:new 0 0 297 252;" 
 
    viewBox="0 0 297 252" xml:space="preserve"> 
 
    <defs> 
 
     <clipPath id="maskID0"> 
 
     <rect width="150" height="252" x="0" y="0" /> 
 
     </clipPath> 
 
    </defs> 
 
    <title>Test Image</title> 
 
    <desc>Test 123</desc> 
 
    <image clip-path="url(#maskID0)" width="297" height="252" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://placehold.it/297x252"></image> 
 
    </svg> 
 
</div>

來源

2016-02-05 17:14:43 Harry

刪除clipover懸停

回答

相關問題