Results 1 to 2 of 2

Thread: How to use transition for multiple div elements?

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Oct 2014
    Posts
    17

    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.

    css Code:
    1. #item {
    2.     transition: background-color 0.5s ease;
    3.     background-color: none;
    4.     border-style: solid;
    5.     border-width: 1px;
    6.     padding: 3px 3% 1% 3%;
    7.     margin-bottom: 2%;
    8.     height: 190px;
    9.     margin-top: 30px;
    10.     }
    11.  
    12.     #item h3 {
    13.     color:#5F7993;
    14.     text-decoration:none;
    15.     font-size: 30px;
    16.     }
    17.  
    18.     #item:hover, #news-item:hover h3 {
    19.     color:#ffffff;
    20.     }
    21.  
    22.     #item:hover {
    23.     background-color: #5F7995;
    24.     font-family: 'museo500';
    25.     color:#ffffff;
    26.     text-decoration:none;
    27.     height: 190px;
    28.     border-color: #5F7995;
    29.     }
    30.  
    31.     #item a { /*This is a button*/
    32.     transition: background-color 0.5s ease;
    33.     background-color: #5F7995;
    34.     color: #ffffff;
    35.     text-decoration: none;
    36.     background: #5F7995 url(../button.png) right bottom no-repeat !important;
    37.     width: 220px;
    38.     text-align: left !important;
    39.     padding: 6px 175px 8px 20px;
    40.     }
    41.  
    42.     #item a:hover { /*This is a button*/
    43.     transition: background-color 0.5s ease;
    44.     background-color: #5F7995;
    45.     color: #000000;
    46.     text-decoration: none;
    47.     background: #ffffff url(../button_hover.png) right bottom no-repeat !important;
    48.     width: 220px;
    49.     text-align: left !important;
    50.     padding: 6px 175px 8px 20px;
    51.     }
    Thanks.
    Last edited by penagate; Dec 8th, 2014 at 10:31 PM. Reason: Added code highlight tags.

  2. #2
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: How to use transition for multiple div elements?

    I'm not exactly sure what you mean by 'automatically hover'.
    You've defined a hover state on the item, and a hover state on the anchor within it.
    Perhaps you just want to change:
    Code:
    #item a:hover
    to:
    Code:
    #item:hover a
    ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width