CSS3 - Transition

我遇到了一个CSS问题。我正在关注一本书来学习CSS3，并且我刚刚发现了函数Transition。所以我决定尝试尝试，我无法弄清楚我错了，我希望你能帮助我。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; 
}

，如果我去用鼠标。框不会对我的坏工程发生任何事情，而是应该从理论上说，改变SSIN的宽度

你能帮我（我知道它的愚蠢，但我学习）

对不起。

谢谢

来源

2013-02-27 Wanny Miarelli

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

来源

2013-02-27 16:10:07

是的，我只是一个白痴！现在它工作。感谢你们。 – 2013-02-27 16:19:32

试试这个，

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

我认为width: 500px;缺少

来源

2013-02-27 16:06:33

看的标记。选择器'.box .ssin'与任何元素都不匹配。 – BenM 2013-02-27 16:08:51

谢谢你，是个白痴。 – 2013-02-27 16:18:25

你错过了从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。

来源

2013-02-27 16:06:43 BenM

既然你正在尝试看看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-27 16:17:37 Starx

为什么不直接使用邻居兄弟选择器，如我的答案中所示？它避免了任何需要改变他的标记... – BenM 2013-02-27 16:20:17

我可以同时使用，但在这种情况下，Sibiling是没有必要的。我想在盒子类上滑动div标题。我刚刚添加.ssin里面的.box然后我添加溢出：隐藏和-webkit过渡和它的作品。 – 2013-02-27 16:23:22

CSS3 - Transition

回答

相关问题