|
CSS - Help With Mouseover Bg Color Change
I know how to make the background of a link change but how do you do it if it isnt a link? in css...
Similar TutorialsI'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code:
.clickableTROpt1{
font-weight: bold;
cursor: pointer;
background-color: #FFFFFF;
}
.cellover{
color: #FFFFFF;
background-color: #CCCCCC;
font-weight: bold;
}
it looks like my css needs to be told to apply the changes to <a> tags as well? Hi, I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change: Code: /* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }
I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row. Code:
<td class="row4" onmouseover='window.status="{$info['name']}";
this.style.backgroundColor=iOver;' onmouseout='window.status="Done";
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>
Thanks, Prism128 PS: The iOver and iOut (in the second code) are colour references in a php file Using transparent gif text. It is linked On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript? How do I do this? I've figured out the opaque text on 50% opaque white background. Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for. 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> 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;
}
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 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 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 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 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. currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks 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 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 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 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, 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? 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 |
|||||||