I would like to have an arrow which will do something on :hover but only when the arrow itself is hovered (not the rectangle which delimits its width and height).

In short, when you hover on the right-bottom and right-top corners of an ► it shouldn't do anything.

How would I achieve that?

I would like to have an arrow which will do something on :hover but only when the arrow itself is hovered (not the rectangle which delimits its width and height).

In short, when you hover on the right-bottom and right-top corners of an ► it shouldn't do anything.

How would I achieve that?

• javascript
• html
• css
• hover
• css-shapes

2 Answers 2

With a HTML map element? See < map >.

Update:

For example, like in this demo:

img {
  border: 3px solid black;
}

<br />
<img id="img" src="http://upload.wikimedia/wikipedia/mons/thumb/3/3c/Black_triangle.svg/200px-Black_triangle.svg.png" usemap="#triangle" alt="" />
<map name="triangle">
    <area shape="poly" coords="3, 3, 195, 3, 100, 169"
        href="http://google." alt=""
        onmouseover="document.getElementById('img').style.borderColor = 'red';"
        onmouseout="document.getElementById('img').style.borderColor = 'black';"/>
</map>

You can either use oldschool imagemaps or track mousemovement throught the mousemove event and then do x/y coordinate calculations.