[英]Make svg polygon button with text change color on mouseover?
http://jsfiddle.net/J7psN/ http://jsfiddle.net/J7psN/
<svg viewbox='0 0 80 80'>
<polygon id=button points='50,0 80,80 0,80'/>
<text x=40 y=50>HELLO</text>
</svg>
I have a polygon button with text on it and I want the polygon to get brighter when you hover over it. 我有一个带有文本的多边形按钮,当你将鼠标悬停在它上面时,我希望多边形更亮。 The problem is that when you hover over the text, the polygon goes back to dark.
问题是当您将鼠标悬停在文本上时,多边形会变回黑暗。
I'd prefer to use mostly html/css but I'm fine with using javascript/jquery as long as I don't need another library. 我更喜欢使用html / css,但只要我不需要另一个库,我就可以使用javascript / jquery。
I was hoping to do one of the following to solve it: 我希望能够做到以下其中一项来解决它:
I thought this would be simple... I've run into some annoying limitations. 我觉得这很简单......我遇到了一些恼人的限制。
You can nest elements of an svg
using <g>
: 您可以使用
<g>
嵌套svg
元素:
<svg viewbox='0 0 80 80'>
<g id=button>
<polygon points='50,0 80,80 0,80'/>
<text x=40 y=50>HELLO</text>
</g>
</svg>
and then apply css styling: 然后应用CSS样式:
#button {
cursor: pointer;
fill: #900;
}
#button:hover {
cursor: pointer;
fill: #F00;
}
text {
font-size:7px;
fill: black;
}
See: http://jsfiddle.net/J7psN/1/ 请参阅: http : //jsfiddle.net/J7psN/1/
You can use: 您可以使用:
$( "#button" ).hover(
function() {
$(this).css('fill' ,'#F00');
}, function() {
$(this).css('fill' ,'#900');
}
);
$('text').mouseover(function(e) {
$(this).prev().mouseover();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.