边界半径和:悬停状态区域问题

时间:2013-05-17 15:10:40

标签: css hover css3 area

我到处都在回答这个问题,但我无处可寻找任何相关内容。谁能告诉我是否可以影响收到项目悬停border-radius属性的区域。因此,在击中真实区域的物品后,会发生颜色等变化的影响?不要阻止DOM中的物理存在作为方块吗?

这很简单。

enter image description here

和一些简单的小提琴:www.jsfiddle.net/nawAE

1 个答案:

答案 0 :(得分:2)

好吧,你可以使用SVG和指针事件:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?redirectlocale=en-US&redirectslug=CSS%2Fpointer-events

或者只是使用SVG,也许使用像Raphäel这样的框架。

或者也许玩地图,让我尝试一下......

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,没有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/