The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pointer Events Question Re: Pointer Events Question


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]( And you can always add more divs to block off more of the arc.


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.