如何防止 svg img 受到任何伪 class 上的按钮 parent 变换属性的影响？

Question

换句话说，防止children受到parent属性

的影响

所以我尝试先在悬停时旋转这些 button，然后再旋转其他东西，但现在让我们专注于悬停，但问题是它也会旋转嵌套的 img..

我尝试了很多方法来阻止它，但是 img 一直在旋转到目前为止最好的解决方案是相反地旋转它，我对这个解决方案一点都不满意，因为它在鼠标离开时再次旋转

这里有一些代码一直在使用

<div class="h2_2006">
      <button class="h2_2601">
        <img class="h2_2611" title="Add To Cart" src="https://s.svgbox.net/materialui.svg?ic=add_photo_alternate" alt="Add To Cart"> 
      </button>

      <button class="h2_2602">
        <img class="h2_2621" title="Watch" src="https://s.svgbox.net/materialui.svg?ic=alarm_add" alt="Watch">
      </button>

      <button class="h2_2603">
        <img class="h2_2631" title="Fav" src="https://s.svgbox.net/materialui.svg?ic=auto_awesome" alt="Add To Favorite">
      </button>
    </div>

和一些带有失败 :after 伪示例的 scss

//scss
.h2_2006 {
        @include grid(1fr 1fr 1fr, 1fr);
        align-items: center;
        grid-gap: 3.3vw;

        >button {
            justify-content: center;
            display: flex;
            align-content: center;
            max-height: 5.2em;
            max-width: 5.2em;
            border-radius: 50%;
            padding: 0;
            border: 0;
            transition: all 1s;
            position: relative;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                transition: all .5s ease-in-out;
                transform: translateX(-100%) translateY(-25%) rotate(45deg);
            }

            &:hover:after {
                transform: translateX(-9%) translateY(-25%) rotate(45deg);
                transition: all 1s;
            }

            >:not(img) {
                pointer-events: auto;
            }
        }

        .h2_2601 {
            @include pos(auto, 1, 2, center, center);
            background: linear-gradient(134deg, rgb(10, 32, 58) 50%, rgb(15, 48, 87) 50%);


            .h2_2611 {
                z-index: 1;
                outline: none;
                transform-origin: 0 0 0;

            }

        }

        .h2_2602 {
            @include pos(auto, 1, 3, center, center);
            background: linear-gradient(134deg, rgb(15, 48, 87) 50%, rgb(10, 32, 58) 50%);
            content: "";

            &:hover,
            &:focus {
                outline: none;
                transform: rotate(0.5turn);
                transition: transform 1s;
            }

            .h2_2621:hover {
                outline: none;
                transform: rotate(-180deg);
                transition: transform 1s;


            }


        }


    }

现在，我不知道我错过了什么，因为我已经关机了

任何帮助将不胜感激

Answer 1

通常，css class 会影响其中的所有内容。所以，如果你不希望你的 svgs 被旋转，你可以将旋转 class 放在更具体的东西上（比如只为那些需要旋转的项目添加另一个 div，只要它们只是兄弟姐妹）。

如果您需要旋转层次结构中的父项而不是子项，那么您可以在子项上指定计数器样式（您提到的是一种您不想使用的方法）

这里要了解的重要一点是，按钮内的 svg 就像将图片放在光盘上一样 - 如果旋转光盘，图片也会旋转，除非您以相反的方向旋转它。

这里有一个interesting article关于指定css的不同层次。也许这可以帮助您找到解决方案

如何防止 svg img 受到任何伪 class 上的按钮 parent 变换属性的影响？

How to prevent svg img from being affected by button parent transform property on any pseudo class?

html

svg

transform

sass

css-selectors

如何防止 svg img 受到任何伪 class 上的按钮 parent 变换 属性 的影响？

How to prevent svg img from being affected by button parent transform property on any pseudo class?

html

svg

transform

sass

css-selectors

如何防止 svg img 受到任何伪 class 上的按钮 parent 变换属性的影响？