CSS li a 'cursor:pointer' not working in div

Question

Within a small <div> container that sits within a larger container, I want to put <a> links in the form of <li> tags. When I put cursor:pointer within my CSS, the hover state does not display a hand and my links are not enabled.

CSS

.black_box_contain li{
    font-family:Verdana, sans-serif;
    margin-left:5px;
    font:inherit;
    list-style:none;
    margin-left:5px;
    padding:0.2em;
    display:inline-block; /* This will reduce space */
    cursor:pointer;
}

.black_box_contain li a {
    color:#0144A7;
    font-size:14px;
    cursor:pointer;
}

HTML

<div class="black_box_contain">North NJ Restaurants <br><br><p>Here are some of my favorite dishes. Hope you enjoy making and eating them as much as I did because they're really good!!</p> <br>
    <li> Italian </li> <br>
    <li> <a> French </a></li><br>
    <li> <a> Mexican </a></li><br>
    <li> <a> Indian </a></li><br>
    <li> <a> Chinese </a></li><br>
    <li> <a> Japanese </a></li><br>
</div>

Cursor Works fine forme Chrome jsfiddle.net/8ZP4Q

DaniP
– DaniP

2014-01-13 00:26:16 +00:00
Commented Jan 13, 2014 at 0:26 — DaniP
– DaniP, Commented Jan 13, 2014 at 0:26

CRABOLO · Accepted Answer · 2014-01-12 23:56:20Z

1

http://jsfiddle.net/CL6HZ/1/

<ul>
    <li> Italian </li> <br>
    <li> <a href="#"> French </a></li><br>
    <li> <a href="#"> Mexican </a></li><br>
    <li> <a href="#"> Indian </a></li><br>
    <li> <a href="#"> Chinese </a></li><br>
    <li> <a href="#"> Japanese </a></li><br>
</ul>

I added <ul></ul> tags, and a href for your a tags.

<ul></ul> or <ol></ol> tags are required for <li></li> tags.

The most important part of the <a></a> tags is the href, so if you don't know what your link will be yet, at least add the href="#" as a placeholder.

answered Jan 12, 2014 at 23:56

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff P. Over a year ago

Thanks for the help! The problem was this particular div was sitting within another div that was overriding the CSS. Works fine now!

uihelp · Accepted Answer · 2014-01-13 00:09:46Z

1

Add "href" attribute to all your anchor tags.
E.g. <a href="#">click</a>
Thanks

answered Jan 13, 2014 at 0:09

uihelp

1982 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS li a 'cursor:pointer' not working in div

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related