Changing cursor by attribute

Question

I've got kind of stuck in the following. In my website I have a dropdown menu. The main item, that causes the dropdown menu to collapse, is not clickable. However, I want to change the cursor of that item to the normal, but make sure that the drop down menu still has the 'hand' cursor.

Html would be:

<ul> 
  <li>
    <a href="nice.php">Normal item<a/>
  </li> 
  <li>
    <a href="#">Dropdown initator</a> 
    <ul>
      <li><a href="droppage.php>Dropdown item</a></li>
    </ul> 
  </li> 
 </ul>

So the link with href="#" should have the non-link cursor; the others should have cursor: 'pointer'.

Tried JS but it won't work, it makes the cursor of the dropdown items also the false one:

$('ul li').hover(function() {
   if($(this).find("a").attr("href") === "#"){
      $(this).css('cursor','e-resize');
      $(this).find("a").css('cursor', 'e-resize');
      $(this).find("ul li").css('cursor', 'pointer');
    }
});

It shouldn't make any differences but the page is actually part of a wordpress installation.

Any help is very much appreciated!

Answer 1

Just use CSS.

a[href='#']{
    cursor: e-resize;   
}

DEMO: http://jsfiddle.net/XnNUt/

Answer 2

You can add the following css:

a {
   cursor: pointer;
}

a[href="#"] {
   cursor: default;
}

Answer 3

Set the css property cursor: pointer; for that specific class.