Grow your CSS skills. Land your dream job.

Pointer Events Question

  • # January 6, 2013 at 9:38 pm

    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!

    # 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](http://codepen.io/Mottie/pen/iajtI). And you can always add more divs to block off more of the arc.

    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.

    # 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.

*May or may not contain any actual "CSS" or "Tricks".