pastel pastel - 11 months ago 51
CSS Question

Why are only some of my links selectable and react when hovered over?

I'm working on a tumblr theme and have run across a problem with my links. The links in my navigation bar (.navstuff) respond when hovered over and lead to a link which is what I want. In my posts, the tags, dates, heart/reblog buttons, and note count should all respond when hovered over, but none of them do except for the post on the bottom. Why is this happening and how can I fix this?
You can see it on jsfiddle here.

.tags {
text-align: left;
margin: 0;
padding: 0;
list-style-type: none;
a {
color: #808080; /*link color remove link underline */
a:hover {
color: #f5cfe0; /*hover over link */

<div class="post">
<a href="{Permalink}">{Title}</a>
<ul class="like-reblog">
<li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCount}</a>{/block:NoteCount}</li>
<li>{block:Date}<a href="{Permalink}">{Month}&#x2606;{DayofMonth}{DayOfMonthSuffix} {Year}</a>{/block:Date}</li>
<ul class="tags">
<li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}

Thank you.

Answer Source

This is because your div #sidebar is overlaying the content. Add a stacking context to place it below your posts:

#sidebar {
    position: fixed;
    z-index: -1;