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
  • #41798

    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)



    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.


    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.