css 在一个react元素中嵌套两个伪类hover，用于更改div中的不透明度和缩放图像

vjrehmav 于 2022-12-20 发布在 React

关注(0)|答案(1)|浏览(87)

我正在尝试通过伪类'hover'来改变div中两个元素的行为。我希望当我悬停项目时，它内部的div会出现，并且图像会缩放它的大小。这是用于图像库的。
但是当我尝试悬停在项目上时，这有一个奇怪的行为，比如轻弹。如何嵌套两个悬停来影响不同的子元素。
这是一个例子：

const item= styled(Box)(({ theme }) => ({
    overflow: 'hidden',
    '&:hover div': {
        opacity: '1',
    },
    '&:hover img': {
        scale: '1.1',
    }
}));

<item>
                           
    <div></div>
    <img />
                      
</item>

css

来源：https://stackoverflow.com/questions/74853094/nesting-two-pseudo-class-hover-in-one-react-element-for-changing-opacity-in-a-di

1条答案

按热度按时间

guykilcj1#

像这样？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .image_list {
      display: flex;
      flex-wrap: wrap;
    }

    .image_container {
      border: 1px solid black;
      padding: 30px;
      margin: 10px;
    }

    .image_container div {
      visibility: hidden;
    }

    .image_container img {
      width: 50px;
    }

    .image_container:hover div {
      visibility: visible;
    }

    .image_container:hover img {
      width: 200px;
    }
  </style>
  <body>
    <div class="image_list">
      <div class="image_container">
        <div>Some text for img 1</div>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" />
      </div>
      <div class="image_container">
        <div>Some text for img 2</div>
        <img
          src="https://st2.depositphotos.com/4211709/7708/i/600/depositphotos_77086607-stock-photo-tree-in-lake.jpg"
          alt=""
        />
      </div>
      <div class="image_container">
        <div>Some text for img 3</div>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" />
      </div>
      <div class="image_container">
        <div>Some text for img 4</div>
        <img
          src="https://st2.depositphotos.com/4211709/7708/i/600/depositphotos_77086607-stock-photo-tree-in-lake.jpg"
          alt=""
        />
      </div>
      <div class="image_container">
        <div>Some text for img 5</div>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" />
      </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2022-12-20

我来回答

css 在一个react元素中嵌套两个伪类hover，用于更改div中的不透明度和缩放图像

1条答案

相关问题

热门标签

最新问答