The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Pointer Events Question

  • Anonymous
    # January 6, 2013 at 9:38 pm

    In this CodePen example:

    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)


    # January 7, 2013 at 2:45 pm

    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.

    # January 8, 2013 at 10:54 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed