pastel pastel - 3 months ago 16
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 */
text-decoration:none;
}
a:hover {
color: #f5cfe0; /*hover over link */
}


<div class="post">
{block:Title}
<h3>
<a href="{Permalink}">{Title}</a>
</h3>
{/block:Title}
{Body}
<ul class="like-reblog">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
<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>
{block:HasTags}
<ul class="tags">
<li>{block:Tags}<a href="{TagURL}">{Tag}</a></li>{/block:Tags}
</ul>
{/block:HasTags}
</div>


Thank you.

Answer

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