CSS3 – Transition
Question by Wanny Miarelli
I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.
This is my Index.html file
<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>
nothing special ! and this is the main.css
.box{
height: 200px;
width: 200px;
background-color: #333333;
}
.ssin{
height: 200px;
width: 200px;
background-color: red;
}
.box:hover .ssin{
width: 500
}
i think the problem is around here …
.box:hover .ssin{
width: 500;
}
if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin
Can you help me ( i know its stupid, but am learning )
Sorry for my bad eng.
Thank you
Answer by Jeremy T
In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin
Answer by Starx
Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box
<div class="box">
<div class="ssin"></div>
</div>
And add the transition css to your code
.ssin {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
