Skip to content

CSS: Ignoring Hover Events

Was playing with the Binary Moon homepage layout today and I wanted to add a hover effect to the thumbnails making the image transparent so that the text became more readable. This worked great when hovering over the thumbnail, however when the mouse hovered over the blog post title the hover effect went away.

A quick Google and I found that there is a css property that lets me disable the hover effect on specific items.

.thumbnail {
    pointer-events: none;
}

If you want to re-enable the pointer event on an elements whos parent has had events disabled – then you can just set the pointer-event to auto.

.thumbnail {
    pointer-events: auto;
}

According to CanIUse.com all recent browsers support the Pointer Events property – the only issue is older versions of Internet Explorer – however since this is purely for a visual effect then I don’t think it’s a big thing for users to miss out on.

Simples – and so much nicer to use than having to come up with convoluted css rules.

Categories

Tips, Web Design

Ben View All

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

Leave a Reply

Your email address will not be published. Required fields are marked *