CSS - On Hover Background Image

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

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!

I've got a problem with the background on hover. It's just a smidge too low and I can't figure out how to raise the background without raising the text. If you look at the image below, you'll notice that the hover "courses & events" is just a bit too low. (real stuff is on a development site, with themes, master pages, etc., and doesn't have a dns beyond our firewall) Any help appreciated.

http://www.mahec.net/images/a.jpg

#topBar {
position:absolute;
padding:0;
width:800px;
background:#78658c;
filter: Alpha(Opacity=90, FinishOpacity=30, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=30);
-moz-opacity:.60;
opacity: 0.6;
border-top:solid 1px #000000;
height:25px;
overflow:hidden;
}

#topInnerBar a {
text-decoration:none;
color:#F9F9E4;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
}

#topInnerBar a:hover {
text-decoration:none;
color:#593F72;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
background:#F9F9E4;
}

I'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution?
following is my css code.

Code:

#navigation { width:160px;	font:bold 14px Arial, Geneva, Helvetica, sans-serif; }
#navigation ul {list-style: none; margin: 0; padding: 0;}
#navigation ul li a {display:block;	background:url(button-menu2.png) no-repeat;	vertical-align: bottom;	font-size:12px;	font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px;	height: 20px !important; height: 20px; width: 100%;	text-decoration: none;	color: #ffffff;	}
#navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;}

Hi there,

I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working.

This is my code:

PHP Code:
 a.button{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
}

a.button:hover{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
background-color: #f6f6f6;
} 





Any ideas how I can acheive this?

Thanks

For some reason I cannot explain, IE6 is re-sizing (shrinking) a div when you mouse-over the second-to-last link in it when the a:hover css sets a background-color!?

Mouse-over the second-to-last link here (about this site):
URL

Mousing over the last link restores it, and if you go from the last link to the second last link it does not shrink it.

It's not doing it in Firefox, and it doesn't do it if the bottom link is not the last bit of text on the page.

This page has the same problem, except if you go down to the second-last link in September 2004, it does not exhibit this behavior, because the last link in the September 2004 div is not the last line of text in it.

URL

Help appreciated. I'm going crazy!

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

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

Hi there,

I have a text field which I would like to change colour on hover. Any ideas how I would do this?

I tried using a class with a:hover but it didn't work.

Thanks!

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

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

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.

Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>HOTWORKS</title>
  <link rel="stylesheet" href="stylz.css" type="text/css">
</head>

<body class="top" id="bdy" > 
<!-- Site navigation menu -->
<ul class="navbar" id="navlist">
	<li><a href="tools.html"><br>Tools</a>
	<li><a href="glass.html"><br>Glass <br> Artwork</a>
	<li><a href="pottery.html"><br>Ceramic<br> Artwork</a>
	<li><a href="about.html"><br>About</a>
</ul>

<!-- Main content -->
<h1>     </h1>

<p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
TOOLS - ART - MISCELLANEA 
<br>

<address>
</address>

</body>
</html>

Code:

#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}

Just to be complete, and in case there is something in here that you might need, here is the full css file:

Code:

  body.top {
    padding-left: 11em;
    font-family: Fantasy, "Times New Roman", Times, serif;
    font-size:15px;
    color: #000000;
    /*background-image: url(images/tab3.jpg) ; */
    background-position: 210px 10px; 
    background-repeat:no-repeat;
    background-color: #000000;
    margin-left:5cm;
	}

   body.top {  background-image: url(images/tab3.jpg) ; }
   
  ul.navbar {
   	color: #000000;
    list-style-type: none;
    position: absolute;
    display:block;
    float:left;
    left: 1em;
	}

  h1 {
    font-family: Helvetica, Geneva, Arial,
		SunSans-Regular, sans-serif 
	}
  ul.navbar li {
		text-align:center; 
   /* vertical-align:100px; */
   background: #000000;
   border-right: 1em solid black;
	}
  ul.navbar a {
		text-decoration: none ;
		 top:10%; 
    height:4em; 
  
	}
  a:link {
    color: white }
  a:visited {
    color: white }

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:144px;
    height:137px;
    color:#fff;
    text-decoration:none;
    background:url("images/drawer4.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
}
#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}
#navlist a:active {
	 background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FFC741;
}

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.