CSS - Change Cursor

I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried
Code:

style.cursor='hand'

with both onmouseover and onmousehover. Neither works.

When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.

Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links.

www.middle-age-guy.com/forum-css-help_images.html


Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page.

___________________________________________

#header {
width: 998px;
margin: 0 auto;
}

#header .container {
background:url(images/head_pat.jpg) left top repeat-x;
height: 200px;
}

/* -- links along the top of the page (Home,

MAGman Lifestyles, etc. --*/

.topline {
}

ul.menu li.page_item {
float: left;
display: inline;
font-size:12px;
margin-top: 25px;
}


ul.menu li.page_item a {
color:#000!important;
text-decoration: none;
padding:25px 0 0px 0px;
margin-right: 15px;
list-style-type: none;
}

ul.menu li.page_item a:hover {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}


ul.menu li.current_page_item a {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}

/* -------------------- Image on right side of header ---------*/

#magmanheadshot {
padding:0;
margin:25px 50px 20px 0;
float:right;
width:160px;
color:#003e4f;
}

/*--------------- Title - Middle-Age-Guy.com --------------*/

#headline {
width:450px;
margin-top: 20px;
}


#headline h1 {
display: block;
clear:left;
font-size:30px;
margin-left: 20px ;
margin-bottom: 5px;
color:#FFFFFF;
font-weight:normal;
}


/* ------------- Tagline below the title --------------*/
.desc_l {
background:url(images/desc_l.gif);
width:10px;
height:27px;
float:left;
margin-left: 25px;

}


.desc {
background:url(images/desc_pat.gif);
height:27px;
float:left;
font-size:14px;
line-height:25px;
font-weight:normal;
color:#FFFFFF;
}



.desc_r {
background:url(images/desc_r.gif);
width:10px;
height:27px;
float:left;
}



.magmandatingsystem {
margin: 10px 0 0 0;
font-size: 12px;
padding: 0 0 0 23px;
float: left;
width: 400px;
}

/* --------------------- Membership login link -----*/

.login {
font-size: 18px;
color:#FFFFFF;
text-decoration: none;
float: right;
margin-top: -80px;
margin-right: 50px;
list-style-type: none;
}

.login a {
color:#FFFFFF!important;
text-decoration: none;
}

.login a:hover {
color:#FF0000!important;
text-decoration:none;

}

.join {
font-styleblique;
font-size: 9px;
font-weight: bold;
}

.join a {
text-decoration:underline !important;
color:#ff0000!important;
}

.join a:hover {
color:#0099FF!important;
}

/* ------------ End of Header -*/

_______________________________________

Here is the relevant html from header.php

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1><?php bloginfo(''); ?></h1>

<div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->
______________________________________________

Finally, this is the source code

________________________________________________

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1>Middle-Age-Guy.com</h1>

</div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->


Thanks for any help you can bring.

Scott

When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac

Even tried a{ cursor:pointer; } but the same thing happens...

http://pd-scammell.co.uk/site/

Any ideas?

Thanks.

Hi

I've got a testpage, with everything removed except the problem which occurs in Firefox
http://ied.gospelcom.net/tester.php

There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is
#reportalert {visibility:hidden;}

This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen.

As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus.

It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD.

Any other ideas I could try?

thanks

Tony

Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ?

Thank you

I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">

/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */

.button
    {
    cursor: pointer;
    cursor: hand;
    }

</style>
</head>

<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>

</html>

Code:

<style>
<!--
BODY{
	cursor:url("Hand.USA.cur");
	}

a, a:hover {
	cursor:url("Hand.USA.cur");
	}

-->
</style>

I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ?

Thanks,

Shawn

Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz

Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why?

Hi im new, I've got a problem and I'm stumped as to why it's happening. I've got several lists on my page with link items. They all work fine, but when I hover over the links in my navbar in chrome and safari, the cursor turns to a text one rather than a hand. This means I can't actually click on the link. However, there are other lists on the page that work fine, and they all work in Firefox. Does anyone know why this is occurring?

You can view the pages he

andrewcharlton.co.uk/gaming_and_gambling2/ggbusinessplans.html

(Can't seem to post a proper link as I am a new user)

It's the about, contact links in the header that dont work.

hmm.

Would be grateful if anyone knows the answer. Thanks!

I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated.

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

I have to do a re-design project to convert a Flash website into xhtml and css only.

The reason for this is that some corporate companies have been unable to see the site at all because thier firewalls ban all Flash content.

My problem is this; the site is very contempory in design and the previous designer used Flash to create his own custom scroll bars that fit nicely with the contempory theme, but doing the same thing using CSS is impossible. I know you can kind of customise scroll bars in IE and I also know that you shouldn't.

The client wants the site re-design to resemble the Flash version as much as possible, and I don't want to faithfully re-create the site and then have these chunky out of place scroll bars in the middle of it.

Should I just propose that the layout be changed to avoid the need for scroll bars?

to dynamically have a menu to change whats css sheet is loaded on page view

Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area?

Thank you