Is the CSS hover feature not functioning properly because of the pseudo-elements?

After experimenting with SVG and CSS effects, I'm trying to achieve a similar style to the game "limbo".

The grain and tiltshift effects are working as intended, but I'm having trouble triggering the hover behavior on SVG elements. What could be causing this issue?

When using the Firefox inspector, I can trigger the hover effect by selecting the element directly. This leads me to believe that the pseudo-elements might be interfering with the hover functionality on SVG elements.

.grain {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  background-position: center
}

.grain:after {
  content: "";
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
  height: 300%;
  width: 300%;
  position: fixed;
  opacity: 0.1;
  animation: animateGrain 8s steps(10) infinite;
}

@keyframes animateGrain {
  0%,
  100% {
    transform: translate(0, 0)
  }
  ...(remaining CSS code)...
<div class="tiltshift">
  <div class="grain">
    <svg>...</svg>
  </div>
</div>

Answer №1

It turns out your instincts were correct - the pseudo-elements are actually causing interference with the hover event. Because they occupy all of the screen space, they end up "capturing" the hover event before it reaches the rect element.

To resolve this issue, you can simply apply the pointer-events: none property to the pseudo-elements. This will prevent them from intercepting hover events, allowing the rect element to respond properly.

For more information on pointer-events in CSS, visit the link provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning Alignment for a CSS Layout with Two Columns

I am trying to achieve a specific layout using CSS. I want the signature to align with the bottom of the other boxes in the design. The challenge is that either box can have different amounts of content, and the signature should always align with the lowes ...

Update the background image of a div smoothly with a fade effect using jQuery

Looking for assistance in adding a fade effect to change the background image of a div element. The background image changes correctly, but I'm struggling with implementing the fade effect. Any help is appreciated! Check out my code here: My JsFid ...

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

Choose all elements following the first child element

My goal is to create a LESS rule that targets every element following the current element, excluding the first child. I've tried using this syntax: (& ~ *):not(:first-child) { margin-left: 5px; } and also this one: & ~ *:not(:first-child ...

Respond to adjustments in iframe height

I am currently working on a page with an embedded iframe. The height of the iframe may change dynamically while on the page. I am wondering if there is a way to adjust the height of the iframe based on its content. Even after trying to set the height at ...

Can a font size be adjusted dynamically based on the width of its containing class?

I have encountered this issue before, but the previous solution did not work for me. I am now seeking a viable alternative. Currently, I am developing a website and have an event announcement block that needs to display the event date spanning the entire ...

I encountered an issue where I was unable to customize the styling of the

I'm facing an issue where I cannot override the style using `className` on a `Button`. Interestingly, the same style works correctly on a `TextField`. However, when I use the `style` prop, it allows me to successfully override the `Button` style. What ...

A way to insert a line break in an HTML document without using the <br> tag is

<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...

striving to showcase components in a horizontal layout

My goal is to have 'Forgot your password?' appear on the same line as 'Remember me', similar to the image. I am using the simple_form gem, but it's causing some issues. Normally, I would use 'display: inline' in my ' ...

Assign a unique class to every item in the selection list

Utilizing the Symfony2 FormBuilder, I have an entity field with a choice list that appears quite lengthy. To enhance user experience, I am looking to add CSS for indenting items based on their groups. While jQuery can assist in adding classes based on opti ...

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

Elastic video player embedded in a flexbox

I'm having an issue trying to make a responsive YouTube embed work inside a flex container alongside other content. The problem is that the container for the YouTube embed doesn't resize properly and ends up overlapping with other elements. To be ...

Employing flexbox to allow columns to shrink only when their width exceeds half of the container's size

Can you take a look at my drawing? Here is the scenario I'm trying to achieve: (1) I have a flexbox with two columns. If one box is bigger than half the width and there is enough space for both boxes, they should remain unchanged (or stretch propor ...

What is the best way to create some distance between a div element and the bottom of the body?

Hello, I am attempting to center a div within my body. The div has a minimum height of 400px, but its size can expand based on the content it holds. When I add more content to the div, it grows accordingly, but it ends up touching the bottom of the div. I ...

Create a navigation bar using CSS that is designed from an unordered list without any specific

Is it possible to create a multilevel menu using only CSS for the menu structure mentioned below? Websites like cssmenumaker.com showcase examples of menus with 2-3 level submenus by adding classes like has-submenu. Can we achieve this without adding any ...

How to Achieve a Fixed Bottom Footer in Ember Framework

Hello, I am working on an Ember application and trying to implement a Sticky Footer feature. I followed a tutorial on Sticky Footer On CSS-Tricks which worked for me previously, but it seems to not work with Ember. Here is my CSS code: .mainFooter { ...

Bootstrap 4's Grid System: Embracing the Square Grid

Is there a way to create a dynamic grid of squares in Bootstrap 4? I understand the concept of creating a grid using <div class="row"> <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> <div class="col-m ...

Styling animations in React with inline styles

Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...

Maximizing Bootstrap: Enabling dual dropdown options side by side on a single row

I am attempting to design a login form within a Bootstrap navbar dropdown. My goal is to have the bottom item display two items side by side in the same row (login/register), but I am struggling to achieve this. You can view what it currently looks like h ...

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...