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.

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:

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;
}