How to use transition for multiple div elements?

[Saul1]

At the moment, I'm testing the transition CSS property. I got a div element working according to how I want it whenever I hover i.e. changing background color, text color and border color.

But at the moment, I've added a button inside the div that's supposed to change color too. It works, but I want it to automatically hover at the same time the background changes colors. I'd like to know if it's possible.

#item {
transition: background-color 0.5s ease;
background-color: none;
border-style: solid;
border-width: 1px;
padding: 3px 3% 1% 3%;
margin-bottom: 2%;
height: 190px;
margin-top: 30px;
}

#item h3 {
color:#5F7993;
text-decoration:none;
font-size: 30px;
}

#item:hover, #news-item:hover h3 {
color:#ffffff;
}

#item:hover {
background-color: #5F7995;
font-family: 'museo500';
color:#ffffff;
text-decoration:none;
height: 190px;
border-color: #5F7995;
}

#item a { /*This is a button*/
transition: background-color 0.5s ease;
background-color: #5F7995;
color: #ffffff;
text-decoration: none;
background: #5F7995 url(../button.png) right bottom no-repeat !important;
width: 220px;
text-align: left !important;
padding: 6px 175px 8px 20px;
}

#item a:hover { /*This is a button*/
transition: background-color 0.5s ease;
background-color: #5F7995;
color: #000000;
text-decoration: none;
background: #ffffff url(../button_hover.png) right bottom no-repeat !important;
width: 220px;
text-align: left !important;
padding: 6px 175px 8px 20px;
}
Thanks.

 

[johnniewalk]

I think it is possible but even i don't for this any solution if any body post it is useful for both of us

 

[weboutgateway]

Try to make your hover style for your button within your div and to the div itself.