CSS - Changing A:hover's Color On Different Parts Of Page, Etc

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?

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

ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help!

here is the html/css code below

CSS:
Code:

	div.top_buttons	{
		background-image:url(../images/top_button_bg.jpg);
		background-repeat:no-repeat;
		background-position:bottom right;
		background-color:#660000;
		border:1px #660000 solid;
		height:50px;
		vertical-align:bottom;
		padding:2px;
		color:#FF99FF;
		font-family:"BankGothic Lt BT", Verdana, Arial;
		font-family:14px;
		font-weight:bold;
		cursor:hand;
		cursor:pointer;
		}
	div.top_buttons:hover	{
		background-color:#950000;
		color:#F5F1F2;
		}

HTML:
Code:

<div class="top_buttons">HOME</div>

Any and all help is much appreviated!

That's what a friend of mine is trying to do to her blog.
She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text.

If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/

Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static.

If anyone knows if this is even possible, please help me out.

Thanks in advance.

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?

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

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

Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ?

Thank you

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!

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?

Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white.

Here is the link to the page
http://www.technicalhypnotherapy.com/wordpress/?page_id=128

This is my CSS. I think the more relevant tags are the last ones.

Code:

/*  
Theme Name: Pixel
Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/
Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy!
Author: Sam @ 85ideas.com
Author URI: http://85ideas.com/
Version: 2.0.2
Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post
.
Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
.
*/

/* Defaults */

* {
  margin: 0;
  padding: 0;
  }
:focus {
  outline:0;
  }
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 10px 0;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: Verdana;
  }

hr {
  color: #333;
  border: 1px solid #121212;
  }

pre {
  height: auto; 
  overflow-x:scroll;
  }

fieldset {
  margin: 0;
  padding: 0; 
  border: 0;
  }

dd {
  padding-left: 15px;
  }


p {
  font-size: 9pt;
  }

a {
  color: #6598b8;
  text-decoration: none;
  }

a:hover {
  color: #222;
  text-decoration: underline;
  }

a img {
  border: none;  
  }

blockquote {
  background: #070707;
  border: 1px solid #060606;
  padding: 5px 15px;
  margin: 10px 10px 5px 15px;
  font-style: italic;
  color: #fff;
  }

code {
  color: #3366cc;
  font-style: italic;
  }

strong {
  font-size: 110%;
  }

body {
  text-align: center;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #000 url(images/bgbody.jpg) top center no-repeat;
  color: #eee;
  }


/* Header and wrapper */
#wrapper {
  margin: 0 auto;
  width: 960px;
  text-align: left;
  padding: 0;
  }

#header {
  padding: 0;
  margin: 0;
  height: 80px;
  text-shadow: 0 0 4px #555;
  }

#header #topright {
  text-align: right;
  float: right;
  width: 930px;
  margin: 3px 0 0 0;
}
#header #topright ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
#header #topright li {
  display: inline;
  }
#header #topright li a {
  color: #fff;
  font-size: 9pt;
  padding: 0 0 0 25px;
  text-transform: lowercase;
  }
#header #topright li a:hover {
  color: #ccc;
  text-decoration: none;
  }

#header #logo {
  margin: 0;
  padding: 0;
}
#header h1 {
  padding: 0;
  margin: 0;
  }
#header h1 a {
  color: #fff;
  font-size: 17pt;
  text-decoration: none;
  }
#header h1 a:hover {
  color: #eee;
  text-decoration: none;
  }
#header span {
  padding: 0;
  color: #eee;
  font-size: 10pt;
  }


/* Menu */

#catnav {
  margin: 20px 0 0 0;
  padding: 0;
  clear: both;
  height: 44px;
  width: 960px;
  }

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  }
	
#nav ul {
  margin: 0;
  padding: 0;
  }

#nav li {
  float: left;
  margin: 0;
  padding: 0;
  }

#nav a {
  display: block;
  line-height: 44px;
  margin: 0;
  padding: 0 20px 0 15px;
  font-size: 10pt;
  color: #fff;
  letter-spacing: -1px;
  }

#nav li a:hover {
  color: #6598b8;
  text-decoration: none;
  display: block;
  }

#nav li ul {
  list-style: none;
  position: absolute;
  width: 150px;
  left: -999em;
  }

#nav li:hover ul, #nav li.sfhover ul {
  left: auto;
  }
	
#nav li li {
  float: left;
  margin: 0;
  padding: 0;
  width: 150px;
  }
	
#nav li li a {
  width: 150px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  border-top: 1px solid #131f27;
  background: #040404;
  margin: 0;
  padding: 5px 20px 5px 15px;
  }
	
#nav li li a:hover {
  border-top: 1px solid #131f27;
  background: #000;
  padding: 5px 20px 5px 15px;
  }

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
  position: static;
  }

#toprss {
  float: right;
  margin: 10px 15px 0 0;
  display: inline;
  width: 65px;
  line-height: 41px;
  }



/* Top Content */

#main {
  margin: 5px 15px 0 15px;
  clear: both;
  width: 930px;
  padding-bottom: 5px;
  }
#contentwrapper {
  float:left;
  width: 560px;
  margin: 0 0 15px 0;
  padding: 0;
  }
#contentwrapper2 {
  float:left;
  width: 900px;  margin: 0 0 15px 0;
  padding: 0;
  }
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {
  margin: 15px 0 10px 0;
  font-size: 14pt;
  letter-spacing: -1px;
  color: #fff;
  font-weight: normal;
  background: url(images/bg-trans.png) repeat;
  padding: 5px;
  }
.topPost {
  margin: 0;
  padding: 0;
  font-size: 9pt;
  }
.topPost h2.topTitle a {
  font-size: 15pt;
  font-weight: normal;
  color: #fff;
  letter-spacing: -2px;
  }
.topPost h2.topTitle a:hover {
  text-decoration: none;
  color: #abd1ea;
  }
.topPost p.topMeta {
  padding: 0;
  margin: -10px 0 0 0;
  font-size: 9pt;
  color: #cdcdcd;  
  }
.topPost p.topMeta a {
  text-decoration: none;
  color: #fff;
  }
.topPost p.topMeta a:hover {
  color: #ccc;
  text-decoration: underline;
  }
.topPost div.topContent {
  font-size: 9pt;
  color: #efefef;
  margin: 8px 0;
  }
.topPost div.topContent p {
  font-size: 1.05em;
  line-height: 1.6em;
  }
.topPost div.topContent a {
  text-decoration: underline;
  color: #fff;
  }
.topPost div.topContent a:hover {
  text-decoration: underline;
  color: #ff9933;
  }

.topPost div.topContent ul, .topPost div.topContent ol {
  padding: 0 0 0 30px;
  }
.topPost div.topContent ul li, .topPost div.topContent ol li {
  font-size: 1.05em;
  color: #eee;
  }
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
  font-size: 9pt;
  font-style: italic;
  background: url(images/bg-trans.png) repeat;
  padding: 8px 10px;
  margin-right: 5px;
  line-height: 27pt;
  color: #fff;
  border: 1px solid #111;
  }
.topPost span.linkpages {
  font-size: 9pt;
  font-style: italic;
  color: #fff;
  margin-bottom: 10px; display:block;
  }
.topPost span.linkpages a:hover {
  color: #ddd;
  }
.topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover {
  background: #040404;
  }
.topPost span.topComments a {
  color: #fff;
  background: url(images/comments.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topMore a {
  color: #fff;
  background: url(images/more.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topTags em {
  background: url(images/tags.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  color: #0a0a0a;
  }
.topPost span.topTags a {
  color: #fff;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
  color: #fff;
  text-decoration: underline;
  }

#nextprevious {
  margin: 10px 0 5px 0;
  }
#nextprevious a {
  color: #eee;
  text-transform: lowercase;
  border: 1px solid #111;
  padding: 5px 8px;
  font-size: 10pt;
  line-height: 1.4em;
  }
#nextprevious a:hover {
  color: #fff;
  }


/* Comments */

#comments {
  margin-bottom: 10px;
  margin-top: 15px;
  background: #040404;
  width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */
  border: 1px solid #090909;
  padding: 0px 15px 10px 15px;
  color: #fff;
  }
#comments h3 {
  font-size: 10pt;
  font-weight: normal;
  color: #fff;
  margin: 15px 0;
  padding: 0;
  }
#comments p a {
  color: #6598b8;
  }
#comments p a:hover {
  color: #fff;
  }
#comments p {
  padding:0;
  margin: 7px 0;
  }
ul.commentlist, ul.trackback  {
  list-style-type: none;
  margin: 10px 0;
  font-size: 9pt;
  }
.commentlist li, .trackback li {
  margin: 10px 0 15px 0;
  padding: 10px;
  background: #080808;
  border: 1px solid #040404;
  list-style-type: none;
  }
.commentlist li.alt {
  background: #000;
  border: 1px solid #020202;
  border: none;
  margin-top:10px;
  }
.commentlist li.cleared {
  background: transparent;
  border: none;
  }
.commentlist a:hover {
  color: #eee;
  }
.commentlist a.gravatar {
  float: left;
  margin: 0 15px 10px 0;
  width: 60px;
  }
.commentlist .commentbody {
  margin: 0;
  padding: 0;
  }
.commentlist .commentbody p a {
  text-decoration: underline;
  }
.commentlist cite {
  font-size: 10pt;
  font-style: normal;
  color: #ddd;
  }
.commentlist small.commentmetadata a {
  color: #666;
  }
.commentlist p {
  color: #dedede;
  }
#respond {
  clear: both;
  margin-top: 15px;
  }
textarea#comment {
  width: 450px;
  background: #fff;
  color: #111;
  padding: 10px;
  }
#comments #submit {
  margin: 0;
  }
#extrastuff a {color:#999; font-size:0.8em;}
#extrastuff a:hover {color:#6598b8; text-decoration:none;}
#extrastuff #rssleft {float:left; width:250px;}
#extrastuff #trackright {float:right; width:180px; text-align:right;}


/* Welcome section */

#main #welcome {
  margin: 0 0 20px 0;
  padding: 0 0 5px 0;
  background: url(images/bg-trans.png) repeat;
  }
#main #welcome h2 {
  font-size: 14pt;
  font-weight: normal;

  color: #fff;
  letter-spacing: -2px;
  margin: 0 10px;
  padding: 10px 0 3px 0;
  }
#main #welcome p {
  font-size: 9pt;
  color: #eee;  
  margin: 0 10px;
  padding: 6px 0;
  }
#main #welcome a {
  text-decoration: underline;
  color: #ff9933;
  }
#main #welcome a:hover {
  color: #6598b8;
  }
#main #welcome form {
  margin: -5px 0 0 0;
  background: transparent; /* required for IE */
  }
#main #welcome #feedbox {
  border: 1px solid #ccc;
  padding: 2px 1px;
  width: 180px;
  }
.submitbutton {
  margin: -5px 0 0 5px;
  background: #010101;
  color: #fff;
  font-size: 8pt;
  padding: 3px 6px;
  vertical-align: middle;
  border: 1px solid #111;
  }
.submitbutton:hover {
  cursor: pointer;
  background: #050505;
  }


/* Sidebars */
#sidebars {
  margin: 15px 0 0 0;
  float: right;
  width: 340px;
  color: #eee;
  }
#sidebars .sidebarbox {
  background: url(images/bg-trans.png) repeat;
  padding: 8px 15px;
  }

#sidebar_full {
  padding: 0;
  margin: 0;
  }

#sidebar_left {
  float: left;
  width: 160px;
  }

#sidebar_right {
  float: right;
  width: 160px;
  }

#sidebars h2 {
  margin: 0;
  padding: 0 0 8px 0;
  font-weight: normal;
  font-size: 11pt;
  color: #fff;
  letter-spacing: -1px;
  }

#sidebars table {
  width: 130px;
  }

#sidebars ul {
  margin: 0;
  padding: 0 0 5px 0;
  }

#sidebars li {
  margin-bottom: 20px;
  list-style: none;
  font-size: 9pt;
  }

#sidebars li ul {
  padding: 0;
  }

#sidebars ul ul li {
  margin: 0;
  padding: 2px 2px 2px 16px;
  color: #eee;
  background: url(images/bullet.gif) left 8px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  }

#sidebars a {
  display: inline;
  color: #eee;
  }
#sidebars a:hover {
  color: #6598b8;
  text-decoration: underline;
  }

#sidebars p {
  padding: 2px 0;
  font-size: 9pt;
  color: #eee;
  }

#tag_cloud a {
  display: inline;
  }

#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}



/* Before footer */

#morefoot {
  background: #000 url(images/bggrad.jpg) top left repeat-x;
  border: 1px solid #070707;
  padding: 15px;
  color: #dfdfdf;
  margin: 0 0 10px 0;
  }
#morefoot p {
  margin: 5px 0;
  padding: 5px 0;
  }
#morefoot ul {
  list-style-type: none;
  margin-top: 5px;
  }
#morefoot ul li, #morefoot p {
  font-size: 9pt;
  }
#morefoot a {
  text-decoration: underline;
  color: #ddd;
  }
#morefoot a:hover {
  text-decoration: underline;
  color: #6598b8;
  }
#morefoot h3 {
  font-size: 12pt;
  font-weight: normal;
  color: #dfdfdf;
  letter-spacing: -1px;
  border-bottom: 1px dotted #444;
  margin: 0;
  padding: 0 0 2px 0;
  }
#morefoot #searchbox {
  padding: 1px;
  width: 180px;
  }
#morefoot .col1 {
  float: left;
  width: 340px;
  }
#morefoot .col2 {
  margin: 0 25px;
  }
#morefoot .col2, #morefoot .col3 {
  float: left;
  width: 260px;
  }
#morefoot li {
  padding-left: 20px;
  margin-bottom: 5px;
  background: url(images/more.gif) left 2px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  }


/* footer*/
#footer {
  clear: both;
  background: #000;
  border: 1px solid #070707;
  padding: 15px 15px 10px 15px;
  }
#footer p {
  font-size: 9pt;
  color: #bbb;
  padding: 0;
  }
#footer a {
  color: #bbb;
  text-decoration:none;
  }
#footer a:hover {
  color: #fff;
  }
#footerleft {
  float: left;
  width: 500px;
  }
#footerright {
  float: right;
  width: 300px;
  text-align: right;
  }



/* Misc */

.highlight {
  color: #222;
  font-weight: bold;
  }

.cleared {
  margin: 0;
  padding: 0;
  clear: both;
  }

.alignleft {
  float: left;
  margin: 10px 15px 5px 0;
  }
.alignright {
  float: right;
  margin: 10px 0 5px 15px;
  }
.aligncenter,
div.aligncenter {
  margin: 10px auto;
  text-align: center;
  display: block;
  }

img.alignleft {
  float: left;
  margin: 10px 15px 5px 0;
  }
img.alignright {
  float: right;
  margin: 10px 0 5px 15px;
  }
img.aligncenter {
  margin: 10px auto;
  text-align: center;
  display: block;
  }

.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  padding-top: 4px;

  /* optional rounded corners for browsers that support it */
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  }

.wp-caption img {
  margin: 0;
  padding: 0;
  border: none;
  }

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
  color: #111;
  }
#reg-form .formleft { background: none !important; 
color: #fff;}

#account-form { background: none !important; 
color: #fff;}

hi,
iam having a div tag in that div i have table..

<div style="width:658;height:265px; overflow:auto;" >
<table>
</table>
</div>

now i need to change the color of scroll bar of this div tag.

i tried with this the css
.myScrollBar {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

<div style="width:658;height:265px; overflow:auto;" id='myScrollBar'>

but its not working..
Regards,

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.