CODEWITHSUNDEEP
htmlcss
user2129623
user2129623

Reputation: 2257

Onhover change effect in css

I have created box with image, link, title and some values. I want to create effect on mouse over/hover.

Here I added the class to do:

Fiddle example

but it does not create effect. What's wrong.

Is this wrong way to do this?

.c1:hover{

.item .moreBtn{position: relative;font-size: 14px;margin-right: 10px;margin-top: 32px;}  

.item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 10.5px 40px 8.0px 40px;color: #FFF;font-weight: bold;font-size: 20px;text-decoration: none;}

    .item h6 {margin-top: 18px;}

    .item{background:#F3F3F3;height: 70px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}

}

Upvotes: 0

Views: 83

Answers (3)

yashasvee
yashasvee

Reputation: 68

You need to use Transition: Transition effect on the width property, duration: 2 seconds:

.item{
transition:width 2s;
}

& 

.item:hover{
height:200px;
background-color:red;
}

Upvotes: 0

George
George

Reputation: 36794

You can't nest styles with pure CSS. You can do that with a pre-processor like SASS

Your pure CSS could look something like:

.item:hover .moreBtn {
    position: relative;
    font-size: 14px;
    margin-right: 10px;
    margin-top: 32px;
}
.item:hover .pillBtn {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background:#7CDD97;
    padding: 10.5px 40px 8.0px 40px;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}
.item:hover {
    background:#F3F3F3;
    height: 70px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

So long as .moreBtn and .pillBtn are descendants of .item

JSFiddle

Upvotes: 2

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

You can use nested CSS styles in plain CSS.

You need to use pseudo-class :hover like this:

.item:hover .moreBtn { ... }     
.item:hover .pillBtn { ... }
.item:hover { ... }

Upvotes: 1

Related Questions