CSS3 - 过渡答案

【问题标题】：CSS3 - TransitionCSS3 - 过渡
【发布时间】：2013-02-13 12:44:10
【问题描述】：

我的 CSS 有点问题。我正在关注一本书来学习 CSS3，我刚刚发现了转换功能。所以我决定尝试一下，我不知道我错在哪里，希望你能帮助我。

这是我的 Index.html 文件

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

没什么特别的！这是main.css

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

我认为问题就在这里......

.box:hover .ssin{
    width: 500;
}

如果我 .box 没有任何反应，理论上它应该改变 ssin div 的宽度。

你能帮帮我吗（我知道这很愚蠢，但我还在学习）

谢谢

【问题讨论】：

标签： css hover css-transitions

【解决方案1】：

试试这个，

.box:hover .ssin{
    width: 500px;
}

我认为width: 500px; 不见了

【讨论】：

查看标记。选择器.box .ssin 不匹配任何元素。

【解决方案2】：

您缺少来自 width 属性的测量值，但您的标记不允许您尝试实现的目标。

.box:hover .ssin 只会在.ssin 是.box 的孩子时触发。如果您想在.box 悬停时为.ssin 的宽度设置动画，则必须使用CSS 中的相邻兄弟选择器（+）：

.box:hover + .ssin {
    width: 500px;
}

如果您希望元素具有动画效果，还需要添加相关的 CSS 属性：

.ssin {
    -webkit-transition: width 0.2s linear;
       -moz-transition: width 0.2s linear;
            transition: width 0.2s linear;
}

这是jsFiddle demo。

【讨论】：

【解决方案3】：

在您发布的 HTML 中，ssin 不在 box 内。 .box:hover .ssin 在box 中选择类ssin 的内容。我相信你在这里想要的是相邻的兄弟选择器：.box:hover + .ssin

【讨论】：

【解决方案4】：

由于您正在尝试研究 CSS3 过渡，我假设您正在尝试增加框的大小。所以，你的标记有点错误。 ssin 应该在 .box 内

<div class="box">
    <div class="ssin"></div>
</div>

并将过渡 css 添加到您的代码中

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

【讨论】：

为什么不使用相邻的兄弟选择器，如我的回答所示？它避免了任何需要更改他的标记...
我可以同时使用两者，但在这种情况下，Sibiling 不是必需的。我想在盒子类上滑动一个 div 标题。我刚刚在 .box 中添加了 .ssin 然后我添加了 overflow: hidden 和 -webkit-transition 并且它可以工作。