hover - 边界半径和：悬停状态区域问题

Question

我到处寻找答案来回答这个问题，但我无处可寻。谁能告诉我我们是否可以影响接收项目悬停边界半径属性的区域。那么颜色等变化的效果是在击中一个真实区域查看的项目后发生的？不要将 DOM 中物理存在的那个方块挡住？

这很简单。

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

Answer 1

好吧，您可以使用 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');

});

看妈妈，没有 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/