0

I have 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 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 hove .box nothing happen, theoretically it should change the width of ssin div.

Could you please help me (I know this is stupid, but I'am still learning)

Thank you

Improve this question

4 Answers 4

Reset to default
2

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

Improve this answer
0
2

You're missing the measurements from the width property, but your markup won't allow what you're trying to achieve.

.box:hover .ssin will only make trigger when .ssin is a child of .box. If you want to animate the width of .ssin when .box is hovered, you'll have to use the adjacent sibling selector in CSS (+):

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

If you want the element to be animated, you need to add the relevant CSS properties too:

.ssin {
    -webkit-transition: width 0.2s linear;
       -moz-transition: width 0.2s linear;
            transition: width 0.2s linear;
}

Here's a jsFiddle demo.

Improve this answer
1

Try this,

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

i think width: 500px; is missing

Improve this answer
1
  • 2
    Look at the markup. The selector .box .ssin doesn't match any element.
    – BenM
    Commented Feb 27, 2013 at 16:08
1

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;
}
Improve this answer
2
  • Why not just use the adjacent sibling selector, as demonstrated in my answer? It avoids any need to change his markup...
    – BenM
    Commented Feb 27, 2013 at 16:20
  • I can use both, but in this case Sibiling is not necessary. I want to slide a div caption over box class. I just added .ssin inside .box then i added overflow: hidden and -webkit-transition and it works.
    – Wanny Miarelli
    Commented Feb 27, 2013 at 16:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.