Border-radius and :hover state area issue

微信扫一扫,分享到朋友圈

Border-radius and :hover state area issue

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?

This is simple img.

and some simple fiddle: www.jsfiddle.net/nawAE

Problem courtesy of: Lukas

Solution

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

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




    

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;
}

More of that:

http://jsfiddle.net/coma/nawAE/16/

Solution courtesy of: coma

微信扫一扫,分享到朋友圈

Border-radius and :hover state area issue

比特大陆IPO将数字货币以成本法记账估值,传统金融市场会认可吗?

上一篇

Getter inside setter in Swift 3

下一篇

你也可能喜欢

Border-radius and :hover state area issue

长按储存图像,分享给朋友