|
CSS - Changing Mouse Cursor Icon On Hover?
Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ?
Thank you Similar TutorialsCode: <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 Thanks for taking the time to read my question. I cannot figure out how to refer to the <img> that I have inside my <a> tag in my menu so that when the user hovers over the menu item, the icon will move. I plan on using margin to make it move, I just can't seem to refer to it correctly so that it does something. Any thoughts would be appreciated. Brad HTML: Code:
<div id="NavContainer">
<ul id="mainmenu">
<li id="mainmenu"><a href="grocery.htm">Grocery <img class="menuicon" src="images/shopping_cart_basket_Small.png" /></a></li>
<li id="mainmenu"><a href="recipe.htm">Recipe <img class="menuicon" src="images/notes_edit_Small.png" /></a></li>
<li id="mainmenu"><a href="messages.htm">Messages <img class="menuicon" src="images/Post-It_Small.png" /></a></li>
<li id="mainmenu"><a href="calendar.htm">Calendar <img class="menuicon" src="images/Calendar_Small.png" /></a></li>
<li id="mainmenu"><a href="phonebook.htm">Phone Book <img class="menuicon" src="images/cellphone_128_Small.png" /></a></li>
<li id="mainmenu"><a href="email.htm">E-mail <img class="menuicon" src="images/mail_Small1.png" /></a></li>
<li id="mainmenu"><a href="budget.htm">Budget <img class="menuicon" src="images/PiggyBank_Small.png" /></a></li>
</ul>
</div>
CSS: Code:
.menuicon {
float: left;
margin: 10px 0px 0px 10px;
padding: 0px;
}
img {
border-style: none;
}
#NavContainer ul li {
display: inline;
list-style-type: none;
background-color: #00FF00;
height: 115px;
padding: 0px;
margin: 0px;
display: block;
float: left;
}
#mainmenu a {
padding: 5px 0px 0px 10px;
margin: 0px 0px 0px 10px;
height: 105px;
width: 186px;
background-color: #3333FF;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
background-position: top left;
display: block;
}
#mainmenu a:link, #mainmenu a:visited, #mainmenu a:active {
color: #000000;
text-decoration: none;
}
#mainmenu a:hover {
text-decoration: none;
}
/*This does not seem to work*/
#mainmenu a:hover .menuicon {
margin-top: 10px;
}
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 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. 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. Thanks for taking the time to read my question. When the mouse hovers over a link I would like the background of the link to change color and for a border to show up around the area. here is what I have. It doesn't work. any suggestion? Code:
#menu a:hover {
/*color:#005c00;*/
font-weight: bold;
font-size: 12px;
width: 114;
background-color: green;
border-top: thin white;
border-left: thin white;
border-right: thin black;
border-bottom: thin black;
}
Thanks, Brad Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems. #1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox. #2. Anyway to get the menus to appear above form elements? I would appreciate any help.... my code... Quote: /* default layout.php */ body { color: #000; background-color: #fff; margin: 0; } p, h1, h2, h3, h4 { margin: 0; padding: 1em; } h2, h3, h4 { color: #cc0000; } #layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a { background-color: #fff; margin: 0 -1px; width: 100%; border:1px solid black; } #footer { color: #000; position: relative; z-index: 13; width: 100%; } #footer a { color: black; } #layoutlogic-abc .page { background-color: #fff; width: auto; border-right: 150px solid #eee; border-left: 200px solid #eee; } #layoutlogic-ab .page { background-color: #fff; width: auto; border-left: 200px solid #eee; } #layoutlogic-a .page { background-color: #fff; width: auto; } .section { margin: 0; width: 100%; } .col-a, .col-b, .col-c { position: relative; float: left; padding: 2.5em; } .col-a a, .col-b a, .col-c a{ color: blue; } .col-a { margin-right: 1px; } .col-b { margin: 0 -3px 0 -2px; } .col-c { margin-left: 1px; } #layoutlogic-abc .col-a, #layoutlogic-ab .col-a { margin-left: -200px; z-index: 10; width: 200px; padding-top: 1em; } #layoutlogic-abc .col-b, #layoutlogic-ab .col-b { z-index: 20; width: 100%; padding-top: 1em; border: 1px solid black; } #layoutlogic-abc .col-c { color: #fff; margin-right: -150px; z-index: 10; width: 150px; padding-top: 1em; } #layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c { display: none; } .floatright { float: right; margin: 1em 1em 0 2em; } .floatleft { float: left; margin: .8em 0 .8em 1.6em; } .clear { clear: both; } .page > .section { border-bottom: 1px solid transparent; } .garamond {font-family: garamond;} ."Times New Roman" {font-family: "Times New Roman";} .verdana {font-family: verdana;} .arial {font-family: arial;} ."Times New Roman" {font-family: "Times New Roman";} and my markup: PHP Code: <body> <div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div> <div id="nav"> <ul class="level1"> <li><a href="/home/"><?= $menu1 ?></a></li> <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a> <ul class="level2"> <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li> <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a> <ul class="level3"> <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li> <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li> </ul></li> <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li> <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li> <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li> <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li> </ul></li> <li class="submenu"><a href="/events/"><?= $menu3 ?></a> <ul class="level2"> <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li> <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li> <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li> <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/competition/"><?= $menu4 ?></a> <ul class="level2"> <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a> <ul class="level3"> <li><a href="/rules/couples.php">Couples</a></li> <li><a href="/rules/line.php">Line Dance</a></li> <li><a href="/rules/pro_am.php">Pro-Am</a></li> <li><a href="/rules/team.php">Team</a></li> </ul></li> <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a> <ul class="level3"> <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li> <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li> <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li> <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li> <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li> <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li> <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li> <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li> </ul></li> <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a> <ul class="level3"> <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li> <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li> <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li> <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li> </ul></li> </ul></li> <li class="submenu"><a href="/worlds/"><?= $menu5?></a> <ul class="level2"> <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li> <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li> <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li> <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li> <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li> <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li> <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li> <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li> <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li> <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li> </ul></li> <li class="submenu"><a href="/judge/"><?= $menu6?></a> <ul class="level2"> <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li> <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li> </ul></li> <li class="submenu"><a href="/classes/"><?= $menu8 ?></a> <ul class="level2"> <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li> <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li> <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a> <ul class="level2"> <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li> <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li> </ul></li> </ul> </div> <div id="layoutlogic-abc"> <div class="page"> <div class="section"> <div class="col-a"> <fieldset><legend>Login:</legend> <table width="100%" border="0"> <tr> <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td> </tr> <tr> <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td> </tr> <tr> <td colspan="2" align="center"><a href="#">Forgot Password?</a></td> </tr> <tr> <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td> </tr> </table> </fieldset> <div align="center"><input type="submit" value="Login"></div> <hr /> <p>left Content </p> <hr /> </div> <div class="col-b"> <div class="floatright"><img src="header2.jpg"></div> <p >Content</p> </div> <div class="col-c"> <p>Content</p> </div> <div class="clear"></div> </div> </div> <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div> </div> </body> </html> Thanks Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower {
width: 765px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#lower ul {
width: 775px;
list-style-type: none;
margin: 0;
padding: 0px;
}
#lower ul li {
font-family: "Trebuchet MS";
font-size: 14px;
width: 250px;
float: left;
}
#lower ul li a {
text-decoration: none;
display: block;
height: 125px;
color: #262626;
}
#lower ul li a:hover {
background-color: #5B8C3E;
color: #D9D9D9;
}
#lower h2 {
font-family: "Trebuchet MS";
font-size: 16px;
margin: 0px;
color: #262626;
}
#lower a h2:hover {
color: #D9CE3F;
}
As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. hello, Im running a website that uses the hover css style to change the button from a darker colored text to a lighter colored text (two different images) but when I go to the web page and hover over it it disappears, only for a second but its still annoying, and then replaces it with the new image. is there any way to get rid of this brief disappearance? Hey there! I have a question: is it possible to change the properties of OTHER elements, IDs, et cetera when hovering over something else? For example, let's say I have a fieldset, and inside are some fields, and a <legend>. Is it possible to make the legend change color when I move my mouse over the fieldset, and not the legend? This could make for some nice CSS effects. Thanks! hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery Hi there everyone. I just wanted know how I could put an icon on the address (URL) bar for my webpage like this devshed site? Thanks a lot. Vinh how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there? thanks I am wanting to move the icons underneath the banner centered horizontally. Myself, and a buddy of mine have tried for nearly three hours and still can't get it to work. Can someone look at the code, and the site and see what's going on please?? Thanks. Site: garou-motw.com Code: #kwick { width : 100%; align: center; } #kwick .kwicks { background : transparent; display : block; height : 70px; margin : 0; padding : 0; } #kwick li { float: left; margin : 0; padding : 0; list-style : none; } #kwick .kwick { display : block; cursor : pointer; overflow : hidden; height : 70px; width : 70px; } #kwick .kwick span { display : none; } #kwick .opt0 { background-color : transparent; outline : none; } #kwick .opt1 { background-color:transparent; outline: none } #kwick .opt2 { background-color:transparent; outline: none } #kwick .opt3 { background-color:transparent; outline: none } #kwick .opt4 { background-color:transparent; outline: none } #kwick .opt5 { background-color:transparent; outline: none } #kwick .opt6 { background-color:transparent; outline: none; } #kwick .opt7 { background-color:transparent; outline: none } #kwick .opt8 { background-color:transparent; outline: none } #kwick .opt9 { background-color:transparent; outline: none } #kwick .opt10 { background-color:transparent; outline: none } #kwick .opt11 { background-color:transparent; outline: none border-right: 0px none; } I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Hi all, I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work. <a onmouseover="this.style.cursor='hand'"> Regards Stephen Hi, Is their any way to change the cursor color in css or javascript? Thanks Rishu Hi people, I could not find a grabbing hand cursor in css cursor property. Instead I use this "cursor:move;" for a while. A grabbing hand like what GoogleMap do when dragging a certain map. Is that a server side creation? hello, i'm placing a custom cursor on a stylesheet like so: body { cursor: url(normal.cur), default; } and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)? thanks for any help! |
|||||||