|
CSS - Cursor: Pointer Stops Working After Jscript Call
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? Similar Tutorialshi there, i'm using code from http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/ for my menubar, the problem is when i refresh the page the menubar is on it stops working. help please! I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved. PHP Code: DIV.special_offer_middle { width: 100px; height: 20px; display: inline; border: 1px dashed white; } Is it possible to have a CSS popup (a:hover) be positioned with regard to the mouse pointer position similar to a tooltip? Hi - I have the following classes defined in a a linked stylesheet... .side{background-image: url(images/wds_side_panel.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } .side_over{background-image: url(images/wds_side_panel_over.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly: <td class="side" onMouseDown="window.location='news.html';" onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';" onMouseOut="document.body.style.cursor='default'; this.className='side';" > <a href="news.html">News</a></td> The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear.. Is this the best way to achieve what I want here ? Might I need to preload the image in the 2nd class? an example page of the above is: http://www.rc23.com/wds_beta/aboutwds.html Any help would be greatly appreciated. Thank you all . Mike. I'm having problems with a navigation system I'm trying to build, it is fairly simple, Mouse over, menu drops down. right side of drop down there are several categories. hover over them and 4 options show up on the left side, and image updates to the correct image. works great, problem is when you try to roll back over to another option on the right, it stays where it was, there is no update for your mouse actions. Does anyone have an idea how this could be fixed? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showElement(aaa)
{
document.getElementById(aaa).style.display="block";
}
function hideElement(aaa)
{
document.getElementById(aaa).style.display="none";
}
function showDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="100";
}
function hideDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="90";
}
</script>
<style type="text/css">
#dd1 { position:absolute; top:70px; left:15px; display:none; }
#dd2 { position:absolute; top:70px; left:100px; display:none; }
/* -------------------------------------------------------------------------
*/
#boatsNav {position:absolute; top:45px; left:220px;}
#boatsNav a.bnav,
#boatsNav a.bnav:link,
#boatsNav a.bnav:visited,
#boatsNav .chosen { display:block; width:100px; height:25px;
background:none;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
float:left;
}
#boatsNav a.bnav:hover {color:#fff; background:#000;}
#boatsNav a.bnav:active,
#boatsNav .chosen {color:#fff; background:#c00;}
/* -------------------------------------------------------------------------
*/
.bdd_dropdowns {background: url(http://www.dnpinteractive.com/temp/newbdd/images/dd_bg1.png) no-repeat bottom right; height:190px; width:313px; position:relative;}
/* -------------------------------------------------------------------------
*/
.bdd_boats {position:absolute; top:5px; right:0px;}
.bdd_boats a.subnav,
.bdd_boats a.subnav:link,
.bdd_boats a.subnav:visited {
display:block; width:100px; height:25px;
background:none;
border-bottom:1px solid #666;
padding:0 5px 0 0;
text-align:right;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
}
.bdd_boats a.subnav:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
/* -------------------------------------------------------------------------
*/
.bdd_links {position:absolute; top:5px; left:6px; width:200px;}
.bdd_links a.ddlink,
.bdd_links a.ddlink:link,
.bdd_links a.ddlink:visited {
width:98px; height:20px;
background:#990000;
text-align:center;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#fff;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links .ddlink_OFF {
/*visibility:hidden; */
background:#000;
width:98px;
height:20px;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#000;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links a.ddlink:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
</style>
</head>
<body>
<div id="boatsNav">
<a class="bnav" href="#" title="page 1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">MONTAUK</a>
<a class="bnav" href="#" title="page 2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')">OUTRAGE</a>
<a class="bnav" href="#" title="page 3" onmouseover="showElement('dd3')" onmouseout="hideElement('dd3')">VENTURA</a>
</div>
<div class="bdd_dropdowns" id="dd1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">
<div class="bdd_links" id="boat1" onmouseover="showDDBoat('boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="boat2" onmouseover="showDDBoat('boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="boat2" />
</div>
<div class="bdd_links" id="boat3" onmouseover="showDDBoat('boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('boat1')" onmouseout="hideDDBoat('boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat2')" onmouseout="hideDDBoat('boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat3')" onmouseout="hideDDBoat('boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd1" -->
<div class="bdd_dropdowns" id="dd2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')" onmouseover="showDDBoat('2boat1')">
<div class="bdd_links" id="2boat1" onmouseover="showDDBoat('2boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="2boat2" onmouseover="showDDBoat('2boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="2boat2" />
</div>
<div class="bdd_links" id="2boat3" onmouseover="showDDBoat('2boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('2boat1')" onmouseout="hideDDBoat('2boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat2')" onmouseout="hideDDBoat('2boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat3')" onmouseout="hideDDBoat('2boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd2" -->
<img id="placeholder_bg" src="http://www.dnpinteractive.com/temp/newbdd/images/placeholder_bg.jpg" height="424px" width="943px" alt="placeholder bg" />
</body>
</html>
I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight? I've also posted in the JavaScript forum. Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? After hours, upon hours of trying to figure out what I did wrong, I've given in and i need to ask for help. Problem: The left Side Nav section BG stops toward the bottom for no reason. I want the left side to continue to repeat like the right side as new content is added. Website: Http://www.ihorde.wowstead.com CSS Code: Code:
body {
background:#000000 url(http://ihorde.wowstead.com/files/bg.jpg) no-repeat center 0;
color:#999999;
font-size:12px;
}
#header {
background:transparent url(http://ihorde.wowstead.com/files/header_tl.png) no-repeat scroll 0 0;
border:0 solid #FFFFFF;
clear:none;
height:190px;
margin:-15px 202px 0;
position:relative;
text-align:center;
z-index:52;
}
#header .title_name {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/header_tr.png);
background-position:right center;
background-repeat:no-repeat;
border:0 solid red;
color:transparent;
display:block;
font-size:0;
height:190px;
left:auto;
margin:0 0 0 auto;
position:relative;
top:0;
width:100%;
}
#header .title_realm {
display:none;
}
#contentarea {
margin:0;
}
#content {
background-color:transparent;
border:0 solid #FFFFFF;
left:-10px;
margin:0 220px 3px 0;
padding:0;
position:relative;
}
div#pagenavbar {
background:transparent url(http://images.wowstead.com/templates/nexus/wotlk/breadcrumb.png) repeat scroll 0 0;
border:1px solid #253039;
margin:0 230px 3px;
padding:1px 20px;
}
#leftnav {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/sidepanel.png);
background-repeat:repeat-y;
border:0 solid #FFFFFF;
display:block;
float:left;
height:1000px;
left:0;
margin-right:20px;
position:relative;
top:-175px;
width:220px;
z-index:50;
}
#rightnav {
background-color:transparent;
border:0 solid #FFFFFF;
display:block;
height:100%;
margin-left:25px;
position:absolute;
right:0;
top:-175px;
width:220px;
z-index:50;
}
#bg {
background:transparent url(http://ihorde.wowstead.com/files/sidepanel.png) repeat-y scroll right center;
min-height:1000px;
}
div.divheadline {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/headerdiv2.png);
background-position:center center;
background-repeat:no-repeat;
border:0 solid #FFFFFF;
color:#090909;
font-family:Copperplate;
font-size:16px;
font-variant:small-caps;
font-weight:bold;
height:39px;
margin-left:auto;
margin-right:auto;
width:180px;
}
div.divcontent {
border:0 solid #FFFFFF;
margin-left:auto;
margin-right:auto;
padding:4px;
width:180px;
}
#netbar {
background:transparent url(http://ihorde.wowstead.com/files/netbar.png) repeat scroll 0 0;
border-bottom:0 none;
height:37px;
}
.bordered .c {
background:transparent url(http://ihorde.wowstead.com/files/content_bg.png) repeat scroll 0 0;
padding:7px;
}
.bordered .tl {
background:transparent url(vborder-tl.png) repeat scroll 0 0;
}
.bordered .tr {
background:transparent url(http://ihorde.wowstead.com/files/border-tr.png) repeat scroll 0 0;
}
.bordered .bl {
background:transparent url(http://ihorde.wowstead.com/files/border-bl.png) repeat scroll 0 0;
}
.bordered .br {
background:transparent url(http://ihorde.wowstead.com/files/border-br.png) repeat scroll 0 0;
}
#footer {
background:#000000 url(http://ihorde.wowstead.com/files/netbar2.png) repeat-x scroll 0 0;
border-color:#FFFFFF #FFFFFF -moz-use-text-color;
border-style:solid solid none;
border-width:0;
height:37px;
margin:0;
padding-top:15px;
}
Someone please help! Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks 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? Hi, Is their any way to change the cursor color in css or javascript? Thanks Rishu 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 I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com 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! I'm trying to change the cursor when a user mouses over an image. Code: cursor:hand Works perfect in IE, but the cursor tag doesn't respond at all in Firefox. I've been able to "trick" Firefox when using onClick JS links by putting href="#". 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. 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 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. 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 |
|||||||