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

回答

相關問題