Pointer Events Question

[Anonymous]

In this CodePen example:

http://codepen.io/msguerra74/pen/mCjzs

Is it possible to disable the pointer events outside of the the rounded area, while keeping the green area still clickable? (kind of like how we used to use image maps)

Thanks!

[Mottie]

Hi msguerra74!

I guess you could overlay the outside of the arc with elements that revert the cursor back to an arrow. It’s not pretty, [but it works](http://codepen.io/Mottie/pen/iajtI). And you can always add more divs to block off more of the arc.

• How
• Are
• You

CSS

body {
font-family: arial;
}
header {
background: #ccc;
height: 150px;
margin: 50px auto;
position: relative;
text-align: center;
width: 700px;
}
nav {
left: 0;
position: absolute;
right: 0;
top: -30px;
}
ul {
border-radius: 0 0 200px 200px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
}
li {
background: green;
display: inline-block;
text-align: center;
width: 100px;
}
a {
color: #fff;
display: block;
padding: 5px 0 125px 0;
text-decoration: none;
}
li:hover {
background: blue;
}

div.blocker {
width: 50px;
height: 150px;
/* border: #999 1px solid; */
position: absolute;
top: 20px;
cursor: arrow;
}
div.left {
transform: rotate(-35deg);
left: 170px;
}
div.right {
transform: rotate(35deg);
left: 478px;
}

Note: I turned on prefix free for that demo.

[Anonymous]

LOL, yeah, that’s a way to do it alright! I just wish there were a cleaner way of doing it…

[Author]

Posts