1

给定以下 HTML 和 CSS：

过渡2.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>

过渡2.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 被移动。是什么导致了这种行为？

4

2 回答 2

3

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

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

顺便说一句，代码也可以写成：

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

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

于 2013-07-02T00:32:54.643 回答
1

.wrap:hover .box就像说

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

我实际上发现 `.wrap:hover > .box 不太明显，但这只是我。

还有SO POST - Additional Example 也可以。

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.
于 2013-07-02T01:49:43.260 回答