边界半径和:悬停状态区域问题 [英] Border-radius and :hover state area issue

问题描述

我到处寻找答案来回答这个问题，但我找不到任何关于它的信息.谁能告诉我我们是否可以影响收到项目悬停边框半径属性的区域.那么在点击真实区域查看项目后会发生颜色等变化的效果吗?不把物理上存在于 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:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?redirectlocale=en-US&redirectslug=CSS%2Fpointer-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');

});

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

这篇关于边界半径和:悬停状态区域问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！