CSS3-过渡_Css_Hover_Css Transitions

CSS3-过渡

css

CSS3-过渡,css,hover,css-transitions,Css,Hover,Css Transitions,我对CSS有点问题。我正在跟随一本书学习CSS3，我刚刚发现了函数转换。所以我决定做一个尝试，但我不知道我错在哪里，我希望你能帮助我这是我的Index.html文件 <html> <head> <title>My Test</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <d

我对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>

我想问题就在这附近

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

如果我忽略了.box，理论上它应该会改变ssin div的宽度

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

谢谢

试试这个

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

我认为

宽度：500px丢失
请尝试此操作
.box:hover .ssin{
    width: 500px;
}

我认为宽度：500px丢失
您丢失了宽度
属性中的测量值，但您的标记不允许您尝试实现的目标
.box:hover.ssin
仅当.ssin
是.box
的子项时才会触发。如果要在.box
悬停时设置.ssin
宽度的动画，则必须使用CSS中相邻的同级选择器（+
）：
如果希望元素设置动画，还需要添加相关的CSS属性：
.ssin {
    -webkit-transition: width 0.2s linear;
       -moz-transition: width 0.2s linear;
            transition: width 0.2s linear;
}

这里有一个问题。
您缺少width
属性中的度量值，但是您的标记不允许您尝试实现的目标
.box:hover.ssin
仅当.ssin
是.box
的子项时才会触发。如果要在.box
悬停时设置.ssin
宽度的动画，则必须使用CSS中相邻的同级选择器（+
）：
如果希望元素设置动画，还需要添加相关的CSS属性：
.ssin {
    -webkit-transition: width 0.2s linear;
       -moz-transition: width 0.2s linear;
            transition: width 0.2s linear;
}

这里有一个。
在您发布的HTML中，ssin
不在框中.box:hover.ssin
选择类ssin
在box
内的内容。我相信您需要的是相邻的同级选择器：.box:hover+.ssin
在您发布的HTML中，ssin
不在框中.box:hover.ssin
选择类ssin
在box
内的内容。我相信您需要的是相邻的同级选择器：.box:hover+.ssin
，因为您正在尝试查看CSS3转换，所以我假设您正在尝试增加框的大小。因此，您的标记有点错误。ssin
应该在框中

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

因为您正在尝试研究CSS3转换，所以我将假设您正在尝试增加框的大小。因此，您的标记有点错误。ssin
应该在框中

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

看看标记。选择器.box.ssin
与任何元素都不匹配。请查看标记。选择器.box.ssin
与任何元素都不匹配。为什么不使用相邻的同级选择器，如我的回答所示？它避免了任何更改标记的需要…我可以同时使用这两种方法，但在这种情况下，sibling是不必要的。我想在box类上滑动一个div标题。我刚刚在.box中添加了.ssin，然后添加了overflow:hidden和-webkit转换，它可以工作。为什么不使用相邻的同级选择器，如我的答案所示？它避免了任何更改标记的需要…我可以同时使用这两种方法，但在这种情况下，sibling是不必要的。我想在box类上滑动一个div标题。我刚刚在.box中添加了.ssin，然后添加了overflow:hidden和-webkit转换，效果很好。