|
CSS - Hover Style, Changing Buttons Dissapear?
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?
Similar TutorialsI have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hi, I'm new to CSS and am trying to design my blog template. For the styles, I have this so far: Code: <style type="text/css">
#navbar-iframe{display: none;height: 0;}
body{background: #FFFFFF; font: 13px arial;color: #999;line-height: 150%;}
.left { width: 460px; text-align:justify; }
.right { width: 180px;font: bold 11px arial;color: #c8c8c8; }
.navigations{
background: #6a6a6a; text-decoration: blur; padding-top: 1px; border-bottom: 3px solid #666 ;float: right; width: 190px; font: 28px arial; color: #aaa; line-height: 200%;text-transform: lowercase; letter-spacing: -2px; }
.navigations :hover{
font: 28px arial; text-decoration: none; padding-top: 1 px; border-bottom: 3px solid #666; float: right; width: 190px; color: #F2EAEA;
background: #777; line-height: 200%;text-transform: lowercase; letter-spacing: -2px;
cursor: crosshair }
.cloud { font: 26px georgia;letter-spacing: 1px;color: #BDA28F }
.icon {border: 20px solid #eee; width:100px; height:100px;}
.h1 { font: 20px times new roman;color: #FD0479; letter-spacing: 0px; line-height:18px;text-transform:uppercase}
.h2 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; text-transform: lowercase;padding:4px;background: url((URL address blocked: See forum rules)); }
.h3 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; font-weight:bold;padding:4px;}
a:link,a:active,a:visited {font: 12px arial; color: #aaa; border-bottom: 1px solid #6a6a6a; text-decoration: none;text-transform: none;letter-spacing: 0px; }
a:hover { color: #8BC4C4; border-bottom: 1px solid #e8e8e8;background: #f2f2f2; text-decoration: none; cursor: crosshair}
b { color: #BE0304;font-weight:bold; }
i { color: #FA727C; }
s { color: #ddd; }
em {font-family: georgia}
blockquote{ color: #999; background: #f5f5f5;padding: 8px; }
</style>
But I can't seem to get the hover navigations to change background colour and text colour. What am I doing wrong? Thanks! i am having trouble with a hover button. it works fine in just an HTML page but when i put it on a CSS & php page nothing happens when i hover over it can anyone advise me on how to resolve this please.....thank you here is the code i am using for the button.... Code:
<a href="productinfo.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Add Button','','images/buttons/infoover.jpg',1)"><img src="images/buttons/info.jpg" name="Add Button" width="32" height="31" border="0"></a>
Thanks in advanced to any replies RF <div style="blah"> What would be used to put :hover in the style tag in place of 'blah'? Other than changing the background color behind the radio button, does anyone know if it is possible to change the color inside the button to anyhing but white? More specificaly, when a button is disabled, anyway to change the grey color on the inside? Thanks guys! 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. I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! I don't know if this is possible but I want to change the background color of some tables programmaticly basically what's happening is I'm ruining some asp.net code which is checking to see if something is approved or not. if it's approved then I want to change the color of the background for one of the HTML tables. if it's not approved then i want to leave it as the default background color. is there a way to do this? Thanks for the help 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 Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ? Thank you ok easy one. basically i have a links outside a div and inside a div called footer. how do i do it so that the links inside the footer div dont take the css style of the one outside? i am trying to do: #footer.a:hover { } and tried a:hover#footer but it aint working? edit never mind!!! Hi, My CSS has a simple declaration for "A" href tags: Code:
a {
color:#8D603B ;
text-decoration: underline;
font-weight:bold;
}
a:visited {
color:#8D603B ;
font-weight:bold;
}
a:hover {
color:#A97043 ;
font-weight:bold;
}
So, this is used throughout the site. However, I want to specify a different style for the "A" tag if it is within a certain DIV. For example, Code: <div class="whitebox">This <a href='mypage.php'>link</a> displays fine because it is inside a white box.</div> <div class="blackbox">I want this <a href='mypage2.php'>link</a> to be white, since it is inside a black box.</div> The problem is - I can't simply add a "class" to the link tag - i.e. <a href='mypage2.php' class='whitelink'>link</a> - because all this will be remote authored via a CMS. Rather than adding complexity to my CMS - is there a simple CSS declaration to specify that all links within the "blackbox" DIV must be a different style (including the 'hover' effect)? Thanks very much! 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. Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF Hi, First post to what looks like a great forum! OK, little problem and I wonder whether anyone can help. I have a page with three frames, two (top and bottom) on the left and one large delivery frame. At one stage, I want to open an external page in the main frame but change its style sheet to my own one. I know I can do this using my browser's own style sheet capability, but I need to do this for everyone who visits. Its a long story, but there are no copyright problems as I do own the copyright to the other site, I just don't have a programmer to change the dynamically generated webpages at the moment. Many thanks, Rohan Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Hey guys, I'm working with firefox and just checking things out in IE to make sure nothing to major pops out. One such thing did come out and I discovered that when I highlight the text of a link the :hover background appears, it normaly doesn't otherwise...although it doesn't follow all my rules here is some code. Code:
/*splash.css*/
#splash p a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
}
/*index.html head*/
<!--[if ie 6]>
<style>
* html #inner_wrap {
top:35%;
}
#splash a:hover{
background-image:url('/image/splash_hover.png');
background-repeat:no-repeat;
color:#000;
position:relative;
top:2em;/*otherwise the same, I gota push the link down farther for IE, 6 anyway*/
}
#jbc_vc{
display:none;/*because it pushes the enter link off the page*/
}
</style>
<![endif]-->
The background image is repeated even thought it's not in firefox, and I have to highlight the text for the background image to even apear. Does anyone know what error is being triggered here? Link To Site Dear CSS Guruz If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this? Louis |
|||||||