CODEWITHSUNDEEP
reactjsstyled-components
SatelBill
SatelBill

Reputation: 731

How to use "hover"(CSS) action in Styled-components?

I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.

How to make blur effect (on mouse over) in styled-components?

My code

const Adiv = styled.div`
  width: 300px;
  height: 60px;
  background: #ffa5;
  &:hover {
    backdrop-filter: blur(2px);          // This line doesn't work
    -webkit-backdrop-filter: blur(2px);  // This line doesn't work
    cursor: pointer;
    border: 1px solid red;
  }
`

But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #aaa {
          width: 300px; 
          height: 60px; 
          position: absolute; 
          top: 150px; 
          left: 50px;
      }
      #aaa:hover {
          cursor: pointer;
          backdrop-filter: blur(5px);
          border: 1px solid red;
      }
    </style>
  </head>
  <body>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
      <div id="aaa">bbbbbbb</div>
  </body>
</html>

enter image description here

Edited

I want to get this effect like above image. I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.

Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?

Upvotes: 4

Views: 4363

Answers (1)

Hultan
Hultan

Reputation: 1549

It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.

Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:

const Adiv = styled.div`
  width: 300px;
  height: 60px;
  background: #ffa5;
  &:hover {
    webkit-filter: blur(2px);
    filter: blur(2px);
    cursor: pointer;
    border: 1px solid red;
  }
`

The results looks like this.

enter image description here

Upvotes: 6

Related Questions