0

我对 CSS 有一点问题。我正在关注一本书来学习 CSS3，我刚刚发现了函数 Transition。所以我决定尝试一下，我无法弄清楚我错在哪里，希望你能帮助我。

这是我的 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 的宽度。

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

谢谢

4

4 回答 4

2

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

.box:hover .ssin只会在.ssin是 的孩子时触发.box。如果您想为悬停.ssin时的宽度设置动画，.box则必须使用 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 演示。

于 2013-02-27T16:06:43.380 回答
2

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

于 2013-02-27T16:10:07.187 回答
1

试试这个，

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

我认为width: 500px;是失踪

于 2013-02-27T16:06:33.443 回答
1

由于您正在尝试研究 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;
}
于 2013-02-27T16:17:37.273 回答