Question

给出以下HTML和CSS：

transitions2.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Transformations</title>
    <link rel="stylesheet" href="transitions2.css">
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

transitons2.css

.wrap {
  margin: 0 auto;
  padding: 15px;
  width: 850px;
  height: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

.box {
  width: 25%;
  height: 200px;
  border-radius: 8px;
  background: #4682B4;
  -webkit-transition-duration: 1s;
}

.wrap:hover .box{
  background: #F08080;
  margin-left: 75%;
}

我的问题是在.wrap：hover中选择.box的最后一个声明。这是如何运作的？为什么不.wrap也没有移动？当我鼠标进入.box的父元素时，只移动.box。是什么导致了这种行为？

Answer 1

父母不移动的原因是因为你实际上不选择它。当悬停事件触发并对该元素进行更改时，您的代码会选择名为wrap的{{1}}子类。

如果您希望父项移动而不是子项，则删除子类box的选择是必要的，但会产生难看的结果。上面的代码按预期工作。

顺便提一下，代码也可以写成：

box

在我看来哪个更清楚地看到发生了什么，但这是我的偏好。

Answer 2

.wrap:hover .box就像说

当我将鼠标悬停在.wrap上时，.box会执行以下操作。

我实际上找到`.wrap：hover＆gt; .box有点不太明显，但那只是我。

还有SO POST - 不同的例子也可以。

ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:

A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any list.

转换其父级内部元素时的CSS转换混淆

2 个答案: