For blog posts listed in the sidebar, I wanted a nice hover effect over the entire entry, whether you hovered over the title, excerpt, or photo.
But the title, excerpt, and photo each have their own <a> tag, so the hover affect would only affect what you hovered over. Frustrating.
Here’s what I wanted, visually:

Note on the screenshot: I am using the Genesis Featured Posts plugin to display blog posts from the Webinars category in the WordPress sidebar . The icon is the WP featured image, and the date/time is the WP excerpt.
Anyway, from CSS-Tricks I learned how to make an entire div clickable: add
display:block;
to the <a> tag inside the div. ref: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/ I could use HTML5, and forget the jquery.
The link around the image (featured image) seemed the most feasible for this purpose. I absolute positioned it and displayed block to cover the entire parent area (in this case <article>). Now a link covered the title, excerpt, and all the space between/around them.
I used padding around the <img>, title, and excerpt to move them away from the article’s edges and from each other. (I couldn’t put padding on the parent <article> because that would move the blanketing <a> tag.)
One problem: z-index. The blanketing <a> tag was on top of everything. With a white background on hover, you couldn’t see any text!
I finally added the white background to the article:hover. Who knows that the link and the hover affect are on 2 different elements?!
Here’s my code:
HTML from plugin:
[codesyntax lang=”html4strict”]
<article class="post-286 post type-post status-publish format-standard has-post-thumbnail category-webinars entry"> <a href="http://immigrationsup.wpengine.com/special-handling-green-cards-for-faculty-members-and-more" class="alignnone" aria-hidden="true"> <img width="42" height="42" src="http://immigrationsup.wpengine.com/wp-content/uploads/icon-webinar.png" class="entry-image attachment-post" alt="Special Handling – Green Cards for Faculty Members and More" itemprop="image"></a> <header class="entry-header"><h4 class="entry-title"><a href="http://immigrationsup.wpengine.com/special-handling-green-cards-for-faculty-members-and-more">Special Handling – Green Cards for Faculty Members and More</a></h4></header> <div class="entry-content"> <p>9 June 2016 2:00PM EDT</p> </div> </article>
[/codesyntax]
CSS:
.sidebar .featured-content article {
position: relative;
border-bottom: 1px solid #e1e0e0;
z-index: 1;
}
.sidebar .featured-content article:hover {
background: white;
cursor: pointer;
}
.sidebar .entry-header {
padding: 20px 20px 0 85px;
z-index: 2;
}
.sidebar .entry-title {
color: #333333;
font-size: 16px;
font-size: 1.6rem;
font-weight: 600;
margin: 0;
}
.sidebar .entry-title a {
color: #333333;
}
.sidebar .entry-content {
color: #910028;
font-size: 14px;
padding: 0 20px 0 85px;
z-index: 2;
}
.sidebar a.alignnone {
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 3;
}
.sidebar a.alignnone img {
margin: 20px;
}
Leave a Reply