SVG：表演上懸停

我使用clipPath應用不同的「屏蔽」作用的頁面上的圖像/文本隱藏項目或textarea。SVG：表演上懸停

每個圖像將具有可變長度的標題。將鼠標懸停在圖像上方時，我想在圖像頂部顯示標題，並在鼠標懸停時顯示，我想隱藏標題。由於標題長度不同，我需要將文字適當地包裹，以便文字不會超出圖像範圍。

我已經嘗試過使用foreignObject和textArea，但我似乎無法使懸停效果正常工作。

我也嘗試使用純HTML（特別是段落標記）和絕對定位+ z-index來定位文本，但文本大小並未隨圖像大小相應地縮放（因爲它不是SVG）。

我使用jQuery在這個項目中，因此，如果需要一個JS的解決方案，jQuery是可用的。

下面是我的工作的HTML（和jsFiddle如果需要的話）：

<div class="featured-image" id="featured-image-one"> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> 
    <defs> 
     <clipPath id="ellipse"> 
     <ellipse fill="#ff0000" cx="50" cy="35.5" rx="49.5" ry="35" /> 
     </clipPath> 
     <clipPath id="hexagon"> 
     <polygon points="25, 0 75, 0 100, 43.30127018922193 75, 86.60254037844386 25, 86.60254037844386 0, 43.30127018922193"/> 
     </clipPath> 
     <clipPath id="rectangle"> 
     <rect x="0" y="0" width="100" height="70"></rect> 
     </clipPath> 
    </defs> 
    <g> 
     <image preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/800px-Bucephala-albeola-010.jpg" id="clippy" clip-path="url(#hexagon)" /> 
     <foreignObject x="10" y="30" width="100" height="100" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
      <p style="color: #ffffff; font-size: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     </body> 
     </foreignObject> 
    </g> 
    </svg> 
</div>

來源

2012-12-12 ctrlaltdel

檢查了這一點：http://jsfiddle.net/LgAjd/4/

基本上我只是增加了一個id您foreignObject和風格的display要none，所以它是無形的默認，然後使用jQuery的事件綁定處理懸停狀態。

Javascript代碼：

$hoverText = $('#hoverText'); 
$('body').on('mouseover', '#featured-image-one', function() { 
    $hoverText.show(); 
}); 
$('body').on('mouseout', '#featured-image-one', function() { 
    $hoverText.hide(); 
});

來源

2012-12-12 23:15:53 acjay

acjohnson55，謝謝！您還提供了一些有關正確使用jQuery的.on（）事件處理程序的信息，我認爲這是我在初次嘗試時使用不正確的。 – ctrlaltdel

是的，開始時有點棘手。您可以直接把它掛到你想要的，而不是'body'的元素，但如果該元素是動態的，你想把它掛到的東西，會在加載時存在，否則就會被加載後，鉤住元素。從技術上講，你應該把它鉤住你想趕上做出選擇搜索儘可能有效，其事件的元素最深的預先存在的祖先。我只是選擇「身體」作爲最淺的共同點。 – acjay

SVG：表演上懸停

回答

相關問題