Make entire WordPress blog article link in sidebar

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