我有一个小问题与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，理论上它应该改变ssindiv的宽度。
你能帮帮我吗(我知道这很愚蠢，但我还在学习)
谢谢
在你贴在那里的HTML中，ssin不在box内。.box:hover .ssin选择box里面的类为ssin的东西。这里应该是相邻的兄弟选择器:.box:hover + .ssin
您错过了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演示。
试试这个，
.box:hover .ssin{
width: 500px;
}
i think width: 500px; missing
既然您正在尝试查看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;
}