|
CSS - Onmouse Over Color Change
Hi,
I have the following sample html. In here moving mouse over in any <li> changes backgroung color. Also I want to have the following as is due to the currently functionality Code: <li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li> here I still want to have <a without href but only wants to change the cursortype and the background color, but also I want the background color to show like others i.e. background color changes too. How can I achieve this functionality. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#sample ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background-color: #9C2B01;
}
#sample ul li a:hover{
background-color: cyan;
}
</style>
</HEAD>
<BODY>
<table><tr><td>
<div id="sample">
<ul>
<li><a href="http://www.test.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu1')">Education Services</a></li>
<li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li>
<li><a href="http://cnn.com" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu3')">Search</a></li>
</ul>
</div>
</td></tr></table>
</BODY>
</HTML>
Any help is appreciated. Thanks Similar TutorialsHello, I am new to css. Does anyone knows how I can create when user put the cursor on top the text it shows the description for that text. For an example in the forum it self when we put the cursor on top of a topic it shows the question. Can someone show some example code for that pls. Thanks in advance Hi, I'm having problem with my onMouseOver effect. It works perfectly fine on the internal browser of MS-Frontpage, but not the external browser like IE6 etc. Couldn't figure out where gone wrong. SOmeone out there please help me. Thanks lots. web_illiterate HEAD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Language" content="en-us"> <title>My first website ever</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content="Keywords here"> <meta name="description" content="Description here"> <META NAME="robots" CONTENT="index, follow"> <META NAME="revisit-after" CONTENT="30 days"> <META NAME="distribution" CONTENT="global"> <META NAME="rating" CONTENT="general"> <META NAME="Content-Language" CONTENT="english"> <script language="JavaScript" type="text/JavaScript" src="images_web/test.js"></script> <link href="images_web/test.css" rel="stylesheet" type="text/css"> </head> My test.css : /* Testing css */ .sidetable { border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #2271A0; font-size: 14px; font-style: normal; font-weight: bold; font-variant: normal; text-decoration: none; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } .sidetable2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } .sidelinks { font-family: Verdana, Arial, Helvetica, sans-serif; color: #2271A0; font-size: 10px; font-weight: bold; } .baseline { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } .sidelinks2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; font-weight: normal; text-decoration: none; } .sidelinks2:a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; font-weight: normal; text-decoration: underline; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; } .producthdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #2271A0; font-weight: bold; } a { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } My test.js : // Testing Js <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> Body : <body onload="runSlideShow()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="86"><table width="79" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="352" rowspan="2"><img src="images_web/toplogo.gif" width="352" height="87"></td> <td width="39" rowspan="2"><img src="images_web/topmidspace.gif" width="39" height="87"></td> <td background="images_web/topbg.gif"><img src="images_web/topbg.gif" width="1" height="54"></td> </tr> <tr> <td background="images_web/navbasebg.jpg" width="460"><img src="images_web/btn_home.gif" name="btn_home" width="71" height="33" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images_web/btn_home_dn.gif',1)" onClick="window.location='index.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_contact.gif" name="btn_contact" width="75" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images_web/btn_contact_dn.gif',1)" onClick="window.location='contact.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_members.gif" name="btn_members" width="93" height="33" id="btn_members" onMouseOver="MM_swapImage('btn_members','','images_web/btn_members_dn.gif',1)" onClick="window.location='members.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_projects.gif" name="btn_projects" width="70" height="33" id="btn_projects" onMouseOver="MM_swapImage('btn_projects','','images_web/btn_projects_dn.gif',1)" onClick="window.location='projects.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_downloads.gif" name="btn_downloads" width="78" height="33" id="btn_downloads" onMouseOver="MM_swapImage('btn_downloads','','images_web/btn_downloads_dn.gif',1)" onClick="window.location='downloads.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"></td> </tr> </table></td> </tr> </body> Hi, I'm just learning css and need some help. I am attaching an html page that has a navigation bar that changes the background color of the table cell when you mouse over the text link. It works OK but I would like to have the bg color change when you mouse over the td cell. I am currently making it look like it changes the td background by adding Code: display: block; line-height: 32px; to the "td.navbar a:hover" class. Is it possible to change the td background when mousing over it using only css? Here's the code that I have now: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
td.navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
td.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
td.navbar a:visited{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
td.navbar a:hover{
background-color: #000000;
height: 33px;
width: 88px;
display: block;
line-height: 32px;
}
td.navbar a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
-->
</style></head>
<body>
<table width="780" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
<tr>
<td width="41"> </td>
<td width="2"></td>
<td width="88" height="33" class="navbar"><div align="center"><font><a href="http://www.mysite.com/">Home</a></font></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><a href="#about">About</a></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><font><a href="inc/support.php">Support</a></font></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><font><a href="inc/contact.php">Contact</a></font></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><font><a href="inc/services.php">Services</a></font></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><font><a href="inc/shop.php">Products</a></font></div></td>
<td width="2"></td>
<td width="88" class="navbar"><div align="center"><font><a href="inc/links.php">Links</a></font></div></td>
<td width="2"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
the code here works fine, except that the displayed text changes from white to black. It would be nice if each new text would start as FFFFCC and then fade to 3E3D11. Here is the script that I'm manipulating from Java Script Source: <!-- Paste this code into the CSS section of your HTML document --> #tic { /* enter any styles for the ticker below */ border: .05em #CEC3AD solid; font-size:0.85em; padding:10px; width:400px; line-height:20px; } #tic * { /* this will hide all children tags */ font-size: 1em; margin:0px; padding:0px; display:none; } #tic a { /* add more tags to this list if you wish to display them inside the children */ display:inline; } <!-- Paste this code into an external JavaScript file --> /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var list; // global list variable cache var tickerObj; // global tickerObj cache var hex = 255; function fadeText(divId) { if(tickerObj) { if(hex>0) { hex-=5; // increase color darkness tickerObj.style.color="rgb("+hex+","+hex+","+hex+")"; setTimeout("fadeText('" + divId + "')", fadeSpeed); } else hex=255; //reset hex value } } function initialiseList(divId) { tickerObj = document.getElementById(divId); if(!tickerObj) reportError("Could not find a div element with id \"" + divId + "\""); list = tickerObj.childNodes; if(list.length <= 0) reportError("The div element \"" + divId + "\" does not have any children"); for (var i=0; i<list.length; i++) { var node = list[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) tickerObj.removeChild(node); } run(divId, 0); } function run(divId, count) { fadeText(divId); list[count].style.display = "block"; if(count > 0) list[count-1].style.display = "none"; else list[list.length-1].style.display = "none"; count++; if(count == list.length) count = 0; window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000); } function reportError(error) { alert("The script could not run because you have errors:\n\n" + error); return false; } var interval = 7; // interval in seconds var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal. <!-- Paste this code into the HEAD section of your HTML document Change the file name and path to match the one you created --> <script type="text/javascript" src="yourFileName.js"></script> <!-- Paste this code into the BODY section of your HTML document --> <div id="tic"> <h1>Welcome to The JavaScript Source ...</h1> <p> The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of the internet.com network.</p> <p> All the scripts on this site are free for personal or business use.</p> <p> The only requirement is that you leave the credit information inside the script.</p> <h2>JavaScripts</h2> <p> JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it's read.</p> <p> JavaScript provides greater flexibility through such luxuries as being able to create windows, display moving text, sound or other multimedia elements with relative ease.</p> <h2>Some Basics</h2> <p> JavaScript is not Java; it is an object-based scripting language; and it is cross-platform. </p> </div> <script type="text/javascript"> <!-- initialiseList("tic"); //--> </script> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div> Hello, a bit of a .css n00b and needs your help. After changing a .css sytle sheet to suit my a needed color shceme the links become underlined when the color is changed. Anyone willing to to tell why. Any help appreciated. A sample of the link code: /*- Links */ #primary a:hover, #primary a:visited:hover, .secondary a:hover, .secondary a:visited:hover { text-decoration: none; } h2 a:hover, h2 span a:hover { color: #423525 !important; <!---27d to 423525 --> text-decoration: none; } a{ color: #423525C; <!---27d to 423525 --> text-decoration: none; } .itemtext a:visited { color: #b41; } Thanks. I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS Ok so I've got a dropdown menu (what you use to select size/font/color when posting a thread) for a search form i'm doing, but the thing is nothing i seem to do in css seems to be able to get rid of the ugly grey outline and grey dropdown button, but as i'm seeing here on the forums the same ugly grey outline appears, is this a problem that is only resolved with like the latest version of i.e., is it possible or not? Thank you, Robert Velasquez UpBeetMusic.com Hello, and thanks in advance for anyone who helps me with this. I want to know if it's possible to choose one color on a page and change it to another. This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else. Possible? Thanks. Crystal I know how to make the background of a link change but how do you do it if it isnt a link? in css... like you see in pic table rows are different color. but i wanna block this for popup. this is popup html Code: <tr> <td class="td_popup"><div class="f1">First Name :</div></td> <td class="td_popup"><input name="firstname" id="firstname" type="text" /></td> </tr> js for css Code:
$(document).ready(function() {
zebraRows('tr:odd td', 'odd');
$('tbody tr').hover(function(){
$(this).find('td').addClass('hovered');
}, function(){
$(this).find('td').removeClass('hovered');
});
//default each row to visible
$('tbody tr').addClass('visible');
css Code:
th:hover {
cursor:pointer;
}
.td1
{
background:#666666;
height:25px;
text-align:left;
font-weight:bold;
font:arial;
font-size:12px;
line-height:10px;
color:#FFFFFF;
padding:2px;
margin-left:auto;
margin-right:auto;
text-indent:3px;
}
td.odd {
background-color:#F0F0F0;
}
.td_popup{
background-color:#DDD;
}
Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{
background-color:#d9f7ff;
color: #71808F;
}
Thanks! cae Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a
{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 4px;
padding: 3px;
text-decoration: none;
width: 170px;
float: left;
background-color: #3A628A;
color: white;
font-family: arial, verdana, sans serif;
font-size: 11px;
}
#links a:hover
{
text-decoration: none;
background: #0A2F54;
}
that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links">
<a href="http://rollinlow54.com/">galleries (18)</a>
<a href="http://rollinlow54.com/">site statistics</a>
<a href="http://rollinlow54.com/">download my resume (pdf)</a>
<a href="http://rollinlow54.com/">contact information</a>
<a href="http://rollinlow54.com/">visit company site</a>
</div>
there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code:
#tabnav a:hover
{
background: #bfbfbf;
color: #f05320;
}
Hi All I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me. Thanks |
|||||||