Conditional hover state for CMS links

Hi there! I really hope someone would be able to help me here!..

I created a collection that highlights the past collaborations that the agency used to have. It lists the names of brands they used to work with. Those brands are essentially links which, upon hover, show an image. If you click on the link, then you will be directed to an appropriate case study.

However, not all the brand names/links have an image and a case study behind them. In that case, I would like to disable the hover on those links.

I can’t figure out how to a conditional hovering? I want those links that have content behind them to interact on hover, but those that are “empty” just stay as they are, so that users don’t get confused. Is there a way to achieve that? Thanks a lot for any help!!


Here is my public share link: Webflow - Project A Design

Hi @panikovsky901, I don’t know if this is the desired result and if it’s optimized, but you can try adding this snippet to your page:

<style>
.work_item [href="#"] {
  pointer-events: none;
}
</style>
1 Like

Amazing! This worked :slight_smile:

I’m a non-code person, so could you explain to me what “pointer-events: none” does?

I understand that .work-item [href=“#”] probably targets only those work-items that do NOT have the URL behind them, right?

(Thank you kindly!!)

Hi, In web development, the CSS property pointer-events is used to control how an element responds to user input events, such as mouse clicks or touches. When you set pointer-events: none; on an element, it means that the element will not respond to any pointer (mouse, touch, etc.) events. In other words, the element becomes “transparent” to user interactions.

And yes, you understood the .work-item [href=“#”]

1 Like

Thanks a lot! Learned something:)