|
CSS - Background Hover Color
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! Similar TutorialsHi 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 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 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! 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 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? 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. Nevermind, fixed. Changed Pixels into Percentages. Delete thread. Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower {
width: 765px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#lower ul {
width: 775px;
list-style-type: none;
margin: 0;
padding: 0px;
}
#lower ul li {
font-family: "Trebuchet MS";
font-size: 14px;
width: 250px;
float: left;
}
#lower ul li a {
text-decoration: none;
display: block;
height: 125px;
color: #262626;
}
#lower ul li a:hover {
background-color: #5B8C3E;
color: #D9D9D9;
}
#lower h2 {
font-family: "Trebuchet MS";
font-size: 16px;
margin: 0px;
color: #262626;
}
#lower a h2:hover {
color: #D9CE3F;
}
As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. 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 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? 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. 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! 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. hover color for an individual piece of link on a page full of links. So not like this in the header: Code:
<STYLE>
a:hover {color:#FF0000}
</STYLE>
but something like this, but then it has to work : Code: <a href="page.html" style="hover-color:#FF0000;"> Link text</a> I noticed that 'text-decoration: none' works in the second way, but i dont know how this hover color has to be done in that way. hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery 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 Hello, I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image). So my HTML is: Code:
<table>
<tr>
<td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
<td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
</tr>
<table />
and my CSS is: Code:
.flights {
background:url(/images/buttons/f_h.gif) center top no-repeat;
width: 78px;
height: 41px;
/* background-image: url(/images/buttons/f_h.gif); */
margin-right: 1px;
}
.flights:hover img {
visibility: hidden;
}
.vacations {
/* background:url(/images/buttons/v_h.gif) top left no-repeat; */
background-image: url(/images/buttons/v_h.gif);
}
For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image. Any insights as to why this might be happening? 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;}
|
|||||||