• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Change Title, Background & Font Color When Hovering Archive Entry Div

This title is a bit confusing so i’ll show you what i mean using this image.

entry hover

Genesis Grid Archive Hover

The CSS code in this post changes the color of the font, entry title and background when you hover over any part of the entry div container.

.home .genesis-grid-even:hover,
.home .genesis-grid-odd:hover  {
    background-color: #0099CC;
    color: #fff;
}

.home .genesis-grid-even:hover .entry-title a,
.home .genesis-grid-odd:hover  .entry-title a {
    color: #fff;
}

The above code styles the genesis grid so both the title and font color change to the same color and the background for the entire div changes to the same color.

There’s 2 rules in the above code.

If you only used the 1st one, the title color wouldn’t change.

Archives Entry Hover

You could also use the same solution your home, blog, category or any other archives like this:

home archive

And here’s the CSS:

.home .entry:hover  {
    background-color: #0099CC;
    color: #fff;
}

.home .entry:hover .entry-meta,
.home .entry:hover .entry-meta a,
.home .entry:hover  .entry-title a {
    color: #fff;
}

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.