The CSS cursor attribute is failing to function as intended

Question

My goal is to change the cursor for all the <a> tags, but when I check the website, the property doesn't seem to be taking effect.

CSS

 a {
  color: #333333;
  /* color: #787878; */
  text-decoration: none;
  cursor: pointer
 }

Website Preview

 a {
  color: #333333;
  /* color: #787878; */
  text-decoration: none;
 }

If you want to take a look at the website, visit: backlabel.com

Answer 1

Answer №1

The main problem here is that the element you are calling a link is actually not functioning as one.

Here is the HTML snippet causing the confusion:

<a data-toggle="collapse" data-target="#demo">Care &amp; Washing&nbsp;▾</a>

If an anchor tag doesn't contain an href, it loses its ability to act as a hyperlink and becomes more of a container, similar to a span element.

To maintain the toggle functionality, you can include the following CSS rule:

a[data-toggle] {
    cursor: pointer;
}

Answer 2

The main problem here is that the element you are calling a link is actually not functioning as one.

Here is the HTML snippet causing the confusion:

<a data-toggle="collapse" data-target="#demo">Care &amp; Washing&nbsp;▾</a>

If an anchor tag doesn't contain an href, it loses its ability to act as a hyperlink and becomes more of a container, similar to a span element.

To maintain the toggle functionality, you can include the following CSS rule:

a[data-toggle] {
    cursor: pointer;
}