CODEWITHSUNDEEP
html
kastulo
kastulo

Reputation: 851

Why is the hand cursor not showing in anchor tag when hovered?

I have this markup, a label wrapped in an anchor tag, but the cursor doesn't change to the hand cursor when you hover over it:

<a href="#17">
  <label class="autor">
    <span class="by">
      by 
    </span>
    Erwin Lutzer
  </label>
</a>

What am I doing wrong here?

Upvotes: 57

Views: 131215

Answers (5)

Yuriy N.
Yuriy N.

Reputation: 6107

Not the answer for actual question, but solution to my own, similar problem:

hand cursor is not showing when hover link. The problem was in the lack of href attribute.

<a>Link</a>  <!-- regular cursor -->

but

<a href="#">Link</a>  <!-- cursor pointer -->

Upvotes: 36

Daniel
Daniel

Reputation: 4173

As stated by others, it is not valid to put a label inside an anchor tag, but if you really want to do it add the following css code to solve your problem:

a label { cursor: pointer; }

Normally you use a label to point to a specific input field so when you click on the label the input field gets focused. Since you don't reference to an input field the label isn't really useful within the anchor tag.

Upvotes: 3

Derek Henderson
Derek Henderson

Reputation: 9706

The label is cancelling out the pointer, so make sure your CSS has cursor: pointer; for both the a and the label:

a,
a label {
    cursor: pointer;
}

Or better yet, remove the label! It's not valid to have a label inside an anchor.

Upvotes: 105

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382170

There's no reason to put a label element in a a element. The label element is here to decorate an input. There's no way for this label to be semantically correct inside a link. As you didn't specify a for attribute linking to an input, there is no reason for it to show the behavior of an activable element.

Reference

Don't use CSS here to add a cursor, this would be semantically incorrect. Replace your label with a span.

Upvotes: 8

Carl0s1z
Carl0s1z

Reputation: 4723

Use this piece of css on your label:

Css code:

label.autor{
cursor:pointer;
}

Upvotes: 2

Related Questions