border-radius和:hover状态区域问题 [英] Border-radius and :hover state area issue
问题描述
我在无处不在回答这个问题,但无处可以找到任何关于它。任何人都可以告诉我,我们是否可以影响收到item hover border-radius属性的区域。这样,改变,如颜色的影响发生后,击中一个实际区域查看项目?不要阻止DOM中的实际存在是一个正方形?
I'm looking everywhere to answer this question but nowhere can I find anything about it. Can anyone tell me whether we can affect the area which received the item hover border-radius property. So that the effect of changes such as color took place after hitting a real area viewed item? Do not block that physically exists in the DOM as a square?
这是简单的img。
和一些简单的小提琴:www。 jsfiddle.net/nawAE
and some simple fiddle: www.jsfiddle.net/nawAE
推荐答案
你可以使用SVG和指针事件:
Well, you can use SVG and pointer-events:
或者只是使用SVG,也许有一些像Raphäel这样的框架。
Or just use SVG, maybe with some framework like Raphäel.
或者玩一个地图,让我试试。 ..
Or maybe play with a map, let me try that...
http://jsfiddle.net / coma / nawAE / 10 /
HTML
<img class="div" src="http://images2.wikia.nocookie.net/__cb20100822143346/runescape/images/2/21/1x1-pixel.png" usemap="hack"/>
<map name="hack">
<area shape="circle" coords="200,200,200" />
</map>
JS
$('area').hover(function(event) {
$('img.div').toggleClass('hover');
});
LOOK MOM,NO JS:
http://jsfiddle.net/coma/nawAE/12/
.div {
display: block;
font-size: 0;
width: 400px;
height: 400px;
background-color: red;
border-radius: 50%;
}
map:hover + img {
background-color: blue;
}
更多:
http://jsfiddle.net/coma/nawAE/16/
这篇关于border-radius和:hover状态区域问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!