I don’t claim to be a CSS guru, so I have a true respect for those who are.

I really prefer the programming more than the style, but a good, healthy knowledge of CSS certainly helps me add more style and class to my websites.

I finally figured out how to do something that’s been causing me a headache lately and I thought I would share it with you. I’m sure this is common knowledge to CSS gurus, but it wasn’t to me.

My problem was that often I needed to click on something in my pages to trigger a javascript or ajax call, but I didn’t want to click on an anchor tag because it would also trigger the href in the tag to be called. I could use the ‘#’ in my href, but that still made my page jump to the top. I could also use the ‘#something’ and give my anchor tags names so that it acted more like a bookmark. But, it still made the page jump around.

I could use a <div> tag or <span> tag, but then my cursor wouldn’t change to the little hand with the pointing finger or whatever browsers use to indicate to the user that this is something that can and should be clicked on. Many times in the past I’ve resorted to the bookmarks and just lived with the jumping pages.

But, the other day, I found this little bit of CSS code that has made it work perfectly:

<div id="trigger" style="cursor: pointer"><b>click here</b></div>

You can see below how this looks. I don’t have any javascript code hooked to this id, but it will give you an idea of how the cursor changes when you hover over the div.

click here

Here is the same line of code without the style attribute:

click here

Adding that style attribute to my <div> or <span> tags makes my cursor change to a little hand with a pointing finger (in my firefox browser) and doesn’t make the page jump around when I click on the link. My javascript can now work without the page ever flickering!