Boundary radius and: error in the area of control
I search all over the place to answer this question, but nowhere I can find anything about it. Can anyone tell me if we can affect the area that got the border-radius of the hover object. For the effect of changes such as color to occur after hitting a real object viewed in a given area? Don't block what physically exists in the DOM as a square?
This is a simple img.
and some simple scripts: www.jsfiddle.net/nawAE
+1
source to share
1 answer
Well, you can use SVG and event pointers:
Or just use SVG, maybe with some frames like Raphäel.
Or maybe play with the card, let me try ...
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;
}
Furthermore:
+2
source to share