Question

我的结构如下：

html {
  background-color: rgba(0, 0, 0, 0.75);
}
.container {
  margin: 10% auto;
  text-align: center;
}
div > span {
  display: inline-block;
}
.horizontal {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}
.bubble {
  display: inline-block;
  padding: 0.5em;
  background: url(http://imgh.us/Service_bubble.svg) no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
}
.bubble:hover {
  transform: scale(2) rotate(-90deg);
}

<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
</head>

<body>
  <div class="container">
    <div class="bubble">
      <span class="fa fa-inverse fa-google fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-facebook fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-twitter fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-github fa-lg"></span>
    </div>
  </div>
</body>

</html>

正如您在片段中看到的那样，当您将鼠标悬停在任何图标上时，包裹任何图标的气泡会向上扩展，并向左旋转90度。（预计）。现在，我不想将轮换传播给孩子（div > span）。它们应该向上扩展，但不应该发生旋转。

另外，如果可能的话，我还想替换hr s，当图标悬停在上面时，它会缩放。 hr s应该相应地移动，在气泡周围留下一点余量。

我尝试过设置以下属性：

div > span:hover {
    transform: scale(2);
}

但是当悬停时它会将图标放大4倍，并且仍然会发生旋转。

有什么想法吗？我只想依赖CSS，并且不想在这里涉及JavaScript。

Answer 1

这样做的一种方法是将孩子向另一个方向旋转。

代码我添加到css：

.bubble:hover span {
  transform: rotate(90deg);
}

.bubble span {
    transition: all 0.3s ease-in-out;
}

这是一种解决方法。我希望还有另一种方法可以做到这一点。

html {
  background-color: rgba(0, 0, 0, 0.75);
}
.container {
  margin: 10% auto;
  text-align: center;
}
div > span {
  display: inline-block;
}
.horizontal {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}
.bubble {
  display: inline-block;
  padding: 0.5em;
  background: url(http://imgh.us/Service_bubble.svg) no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
}
.bubble:hover {
  transform: scale(2) rotate(-90deg);
}

.bubble:hover span {
  transform: rotate(90deg);
}

.bubble span {
    transition: all 0.3s ease-in-out;
}

<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
</head>

<body>
  <div class="container">
    <div class="bubble">
      <span class="fa fa-inverse fa-google fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-facebook fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-twitter fa-lg"></span>
    </div>
    <hr class="horizontal" />
    <div class="bubble">
      <span class="fa fa-inverse fa-github fa-lg"></span>
    </div>
  </div>
</body>

</html>

Answer 2

另一种解决方案是使用pseudo选择器（:before）来获取:hover上的轮播。

html {
  background-color: rgba(0, 0, 0, 0.75);
}

.container {
  margin: 10% auto;
  text-align: center;
}

div > span {
  display: inline-block;
}

.horizontal {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}

.bubble {
  display: inline-block;
  padding: 1em;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.bubble:before {
  content:'';
  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0; left: 0;
}

.bubble:hover {
  transform: scale(1.5);
  margin: 0 10px;
}

.bubble:hover::before {
  transform: rotate(-90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="bubble">
    <span class="fa fa-inverse fa-google fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span>
  </div>
  <hr class="horizontal">
  <div class="bubble">
    <span class="fa fa-inverse fa-github fa-fw fa-lg"></span>
  </div>
</div>

jsFiddle：https://jsfiddle.net/azizn/gypu0pn2/

我在原始代码中编辑了一些内容以创建更流畅的效果：

图标的宽度不同会导致不一致，因为.bubble容器没有定义的尺寸（高度/宽度）。为了解决这个问题，我添加了fa-fw类，它使图标固定宽度，以便更好地保持一致。
默认情况下，背景图片的位置为top left，除非更改为center，否则可能导致定位问题。
使用margin上添加的:hover

编辑：更简化的HTML结构。删除了.bubble容器，改为使用:after。

html { background-color: rgba(0, 0, 0, 0.75); }

.container { margin: 10% auto; text-align: center; }

.container hr {
  display: inline-block;
  position: relative;
  top: .1em;
  width: 15%;
}

.bubble {
  padding: 1em;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.bubble::after {
  content:'';   position: absolute;
  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
  background-size: contain;
  transition: all 0.3s ease-in-out;
  height: 100%; width: 100%;
  top: 0; left: 0;
}

.bubble:hover {
  transform: scale(1.5);
  margin: 0 10px;
}

.bubble:hover::after { transform: rotate(-90deg); }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <span class="bubble fa fa-inverse fa-google fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-facebook fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-twitter fa-fw fa-lg"></span>
  <hr>
  <span class="bubble fa fa-inverse fa-github fa-fw fa-lg"></span>
</div>

jsFiddle：https://jsfiddle.net/azizn/1uqrqoda/

Answer 3

您的html架构并未完全适应您的问题。如果你可以改变它，最好的办法是：

 <div class="container">
    <div class="bubble"></div>
    <span class="fa fa-inverse fa-github fa-lg"></span>
</div>

气泡内部div和span应该绝对位于容器div的位置。例如：

.container { position: relative; }
.container > div, .container > span {position: absolute; top: 10px;  left: 10px;}

然后你可以将不同的过渡/动画应用于div和span。

.container:hover > div {
    transform: scale(2) rotate(-90deg);
}
.container:hover > span {
    transform: rotate(-90deg);
}

CSS中的变换缩放/旋转效果不应该影响孩子

3 个答案: