Forums

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

Home Forums CSS Pointer Events Question

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41798
    Anonymous
    Inactive

    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!

    #120152
    Mottie
    Member

    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.

    #120350
    Anonymous
    Inactive

    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.