PHP Developers Network
http://forums.devnetwork.net/

How to use transition for multiple div elements?
http://forums.devnetwork.net/viewtopic.php?f=68&t=140714
Page 1 of 1

Author:  Darrel [ Mon Dec 08, 2014 11:09 am ]
Post subject:  How to use transition for multiple div elements?

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.

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/