如何使图案悬停效果？

<!DOCTYPE HTML> 
 
<html lang="ru"> 
 
<head> 
 
<title></title> 
 
</head> 
 
<style> 
 
svg{ 
 
    overflow:hidden; 
 
} 
 
    defs:hover{ 
 
    transform:scale(1.2); 
 
    } 
 
</style> 
 
<body style="background:url(http://namonitore.ru/uploads/catalog/znamenitosti/karolina_kurkova__i_devushki_v_bikini_1280.jpg); background-size:cover;"> 
 

 

 

 
<svg width="400" height="240"> 
 
    <polygon points="10 220, 10 10, 280 10,380 220" 
 
    style="fill:green; stroke:green; stroke-width:3; opacity="1" /> 
 

 
</svg> 
 

 

 

 
<svg width="400" height="240" style="position:relative; left:-120px;"> 
 
    <defs> 
 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240"> 
 
      <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/> 
 
     </pattern> 
 
    </defs> 
 
    <polygon points="110 220,10 10,380 10,380 220" 
 
    style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" /> 
 
</svg> 
 

 
</body> 
 
</html>

这是必要的，当你将鼠标悬停在女孩子，效果仿佛与背景位置。我对英语知之甚少，但问问的时间更长。当你将鼠标悬停在女孩的形象上时，如何制作缩放效果？

来源

2016-06-12 Максим Ленский

如果我正确理解你的问题，那么你应该添加一个类这是旁边<defs>元素的多边形，添加一个类，并在该多边形使用CSS。对于例如：

<svg width="400" height="240" style="position:relative; left:-120px;"> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240"> 
      <image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/> 
     </pattern> 
    </defs> 
    <polygon class="girls" points="110 220,10 10,380 10,380 220" 
    style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" /> 
</svg>

然后在你的CSS，而不是：

defs:hover{ 
    transform:scale(1.2); 
    }

这样做：

polygon.grils:hover{ 
    transform:scale(1.2); 
    }

来源

2016-06-12 15:49:51

https://jsfiddle.net/meoLe830/#&togetherjs=44p7vNetfn这里在沙盒的链接，看到自己 - 的效果是零 –

你哑了什么什么，我的答案写 –

请给我上的jsfiddle –

如何使图案悬停效果？

回答

相关问题