CSS - Change Background Of Div On Scroll Over.

I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks!
Cheers ~Kat
Menu bar at: (cater-express dot com)

Hi all,

I have a design shown on my website he http://janusz.co.uk/dudley%2Dbeacon/

I have a horizontal navigation towards the top. Here are my queries:

I would ideally want this to be CSS based and not in the table as it is now. Furthermore, I want it to be cross browser friendly! I achieved half of this but there seems to be a minor yet annoying difference in the way netscape, firefox, avant and I.E. all render paddings! There are 8 boxes so ideally they should all be equally stretched across the page. I would also want the background colour to change.

OR

Use the current setup but have the background change when the user hovers over the link. I would like the background colour of the cell to change. However.... I don't want to use javascript to do this, is this possible at all just using CSS?

Please help!!!

Thanks!

Janusz

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

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

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.

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

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??

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

i have been using the website tonight program on godaddy.COM i would like to change the background to a personal picture i have. when i called they told me they had no idea how to do it but it might have something to do with the css and to view the advanced css option here is what i found :

Code:

/*----------------------------------
		Theme411_Clean_Slate
		Cat Generic
----------------------------------*/

body {	
	font-family: "Times New Roman", Times, FreeSerif, serif;
}

.sf_outer_wrapper {	
}

.sf_extra1 {
}

.sf_wrapper {	
}

/*--------------------------------
		Top Navigation
---------------------------------*/

.sf_navigation_top {
	display: none;
}

.sf_navigation_top ul{
	
}

.sf_navigation_top ul:after{
	
}

.sf_navigation_top ul li {
	
}

.sf_navigation_top ul li.sf_last_nav_item{
	
}

.sf_navigation_top ul li.sf_first_nav_item{

}

.sf_navigation_top ul li a {
}

.sf_navigation_top ul li a:visited {	
	
}

.sf_navigation_top ul li a:hover {
	
}

/*--------------------------------
		End Top Navigation
---------------------------------*/


.sf_extra10 {
}


/*--------------------------------
		Header
---------------------------------*/

.sf_header_wrapper {	
}

.sf_extra2 {
}

.sf_main_header {	
}

.sf_extra3 {
}

.sf_sub_header {	
}

/*--------------------------
		End Header
--------------------------*/


.sf_extra4 {
}


/*--------------------------------
		Bottom Navigation
---------------------------------*/

/**
 * @section navigation
 */
.sf_navigation {
    padding:0;
	margin: 0;	
}

.sf_navigation ul {	
    height: auto !important;
    height: 9%;
	list-style-type:disc; 
	margin:0;
    padding:0 0 0 30px;
	width: 900px;
}

.sf_navigation ul li {	
	margin:5;
    padding:0;
	width:200px;	
}

.sf_navigation ul li a {
	display:block;
    margin: 0;	
    padding:0; 
    text-decoration: none;
	width:175px;
}

.sf_navigation ul li a:hover {
	text-decoration:underline;
}

/**
 * @section subnav
 */
.sf_navigation ul.subnav {
	background:#ffffff;
	left: -999em;	
	list-style-type:none; 
	margin:-1.12em 0 0 160px;
    padding:0;
	position: absolute;
	float: left;
	width: 170px;
	z-index:1000;
}

.sf_navigation ul.subnav li {
	float: left;
	width: 170px;
	margin:0;
    padding:3;
}

.sf_navigation ul.subnav li a {
	width: 170px;
	display: block;
	padding:2px 0; 
    margin: 2;
	background-image:none;
}

.sf_navigation ul.subnav li a {
	text-decoration:none;
}

.sf_navigation ul.subnav li a:hover {
	background:#f1f1f1;
	text-decoration:underline;
}

#Nav1 li:hover ul, 
#Nav1 li.sfhover ul {
	left: auto;
}

#Nav1 iframe {
	position: absolute;
	left: 4;
	top: 3;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
} 

/*--------------------------------
		End Bottom Navigation
---------------------------------*/


.sf_extra5 {
	clear:none !important;
	clear:left;
}


/*--------------------------------
		 	Page Title
---------------------------------*/

.sf_pagetitle {
	color: 000000 ;
}

/*--------------------------------
		 End Page Title
---------------------------------*/


.sf_extra6 {

}

.sf_extra11 {

}
	
/*--------------------------
		Content
--------------------------*/

.sf_content {	
	
}

.sf_content img {
	
}

/*--------------------------
		End Content
--------------------------*/


.sf_extra12 {
	
}

.sf_extra7 {

}

/*--------------------------
		 Footer
--------------------------*/

.sf_footer {
	
	clear: both;
}

/*--------------------------
		End Footer
--------------------------*/


.sf_extra8 {
	
}

.sf_extra9 {
	
}


/*--------------------------
		Extra Stuff
--------------------------*/


a:link {	
}

a:visited {	
}

a:hover {	
}

.sf_banner {
	margin: 40px auto 0 auto;
	text-align: center;
}

.sf_banner a{	
}


/**
 * Sticking flyout menu bug
 *
 * @bugfix
 * @affected ie7
 * @css-for ie7
 * @valid yes
 */
#Nav1 li:hover, #Nav1 li.hover {  
    position: static;  
} 

PLEASE HELP ME WHAT DO I DO TO CHANGE MY BACKGROUND TO A PERSONAL PICTURE I HAVE

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

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

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

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.

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

Can anyone tell me how to change the background colour of all tooltip texts on a web page?

Cheers.