在悬停时旋转父级而不是子级

本文介绍了在悬停时旋转父级而不是子级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

<figure>元素应在悬停时旋转，但其子元素<img>不应该旋转.仅使用SCSS. <figure>的背景略大于<img>的背景，因此具有边框效果.

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

.about__image { margin: 4rem; width: 27rem; height: 27rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: relative; background-image: radial-gradient(at left top, red 25%, blue 55%); } .about__photo { position: absolute; margin: 1rem; width: 25rem; height: 25rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } div { height: 600px; width: 100vw; background: #eee; } div:hover .about__image{ transform: rotate(90deg); }

<div> <figure class="about__image"> <img src="lorempixel/200/200/" class="about__photo"> </figure> </div>

<figure>元素应在悬停时旋转，但其子元素<img>不应该旋转.仅使用SCSS. <figure>的背景略大于<img>的背景，因此具有边框效果. <figure>元素应在悬停时旋转，但其子元素<img>不应该旋转.仅使用SCSS. <figure>的背景略大于<img>的背景，因此具有边框效果.

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect. The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

推荐答案

一个想法是旋转容器并将反向旋转应用于图像，如下所示:

An idea is to rotate the container and apply the inverse rotation to the image like this:

.about__image { margin: 4rem; width: 27rem; height: 27rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: relative; background-image: radial-gradient(at left top, red 25%, blue 55%); transition:1s; } .about__photo { position: absolute; margin: 1rem; width: 25rem; height: 25rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); transition:1s; } div:hover .about__image{ transform:rotate(180deg); } div:hover .about__photo{ transform:rotate(-180deg); } div { height: 600px; width: 100vw; background: #eee; }

<div> <figure class="about__image"> <img src="lorempixel/200/200/" class="about__photo"> </figure> </div>