在悬停时旋转父级而不是子级 [英] Rotate Parent but not child on hover

问题描述

<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="https://lorempixel.com/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="https://lorempixel.com/200/200/" class="about__photo">
</figure>
</div>

这篇关于在悬停时旋转父级而不是子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！