|
CSS - Change Container Color - Hover
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 Similar TutorialsI 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 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 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? 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;
}
Nevermind, fixed. Changed Pixels into Percentages. Delete thread. I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! hello all. thanks for your time. i am having some issues with a background image & color not showing up in a container div. here is the snippet from the CSS where the background image and color are defined. you can view the full CSS http://americanwalkincoolers.com/test/css/site.css Code: #container {
background: url('./img/faux_bg.gif') repeat-y top left #496d9d;
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
and the page is he http://americanwalkincoolers.com/test/index.html i am attempting to cheat on the layout by placing a background color/image that will make the right column extend the length of the page. currently the right column has a graphic that says "featured products" followed by a gap that runs the length of the container. can anyone help me? bonus points if you can explain to me why the BG color & BG image aren't showing up from the container. thanks again. Look at this page - http://certified.tmhdesign.com/about.asp I have a div called container, then in that div one called header, content_right, content_left, and footer. What is frustrating me is that I have to hard code a min-height for the left and right colums and if you scroll down you'll see where the background color of the body appears below the right column which I want to be white. When I specify the color of the container that does not fix the issue. Any help would be appreciated. Thanks. I've been working on converting to css for table-like layout. I have the three column variety with a header. Around all 4 is a container to keep things ship shape. My issue is that even though I've specified a background colour for the container it doesn't seem to override the body color making the column lengths uneven. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mrhodges.net: A web site for Mr. Hodges classes</title>
<style type="text/css" >
body { background-color: #014e82;
text-align: center;
font-family: Georgia, serif;
}
#container { width: 90%;
margin: 10px auto;
background-color: #ffffff;
text-align: left;
}
#banner { background-color: #014e82;
padding: 1px;
}
#banner p.title { font-size: 2.5em;
color: #ffffff;
background-color: #014e82;
text-align: center;
margin: 0;
padding: 0 0 5px 0;
}
#banner ul { list-style-type: none;
text-align: center;
padding: 0 0 10px 0;
margin: 0;
font-family: Verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
}
#banner ul li { display: inline;
}
#banner ul li a { text-decoration: none;
padding: 0;
}
#banner a:link { color: #ffffff;
padding: 0;
}
#banner a:visited { color: #ffffff;
padding: 0;
}
#banner a:hover { color: #ffffff;
text-decoration: underline;
padding: 0;
}
#banner a:active { color: #54b818;
text-decoration: underline;
padding: 0;
}
#leftnav { float: left;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#leftnav ul { margin: 0;
padding: 0;
list-style-type: none; }
#leftnav a { display: block;
color: #049;
background-color: #fff;
text-decoration: none;
padding: 0 0 0 5px;
}
#leftnav a:hover { background-color: #ddd;
color: #049;
}
#rightnav { float: right;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#middle { margin-left: 160px;
margin-right: 160px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<p class="title">mrhodges.net</p>
<ul>
<li><a href="http://www.cbc.ca/news/">CBC News</a> |</li>
<li><a href="http://dictionary.reference.com/">Dictionary</a> |</li>
<li><a href="http://www.fmcsd.ab.ca">FMCSD</a> |</li>
<li><a href="http://www.google.ca">Google</a> |</li>
<li><a href="http://www.mymcmurray.com">mymcmurray</a> |</li>
<li><a href="http://www.theweathernetwork.com/weather/cities/can/Pages/CAAB0124.htm">Weather</a> |</li>
<li><a href="http://en.wikipedia.org/wiki/Main_Page.html">Wikipedia</a></li>
</ul>
</div>
<div id="leftnav">
<ul>
<li><a href="overview.html">Course</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="outline.html">Outlines</a></li>
<li><a href="outline.html#modules">Modules</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="rap.html">RAP Program</a></li>
</ul>
<br />
<ul>
<li>Safety</li>
<li>Consent</li>
<li>.pdf form</li>
</ul>
<br />
<ul>
<li><a href="dates.html">Dates</a></li>
<li><a href="dates.html#term">Term</a></li>
<li><a href="dates.html#plc">PLC Days</a></li>
<li><a href="dates.html#holi">Holidays</a></li>
<li><a href="dates.html#inter">Interviews</a></li>
<li><a href="dates.html#mod">Module</a></li>
<li><a href="dates.html#exam">Exam</a></li>
</ul>
<br />
<ul>
<li><a href="http://www.mrhodges.blogspot.com">Daily Log</a></li>
<li><a href="http://www.mrhodges.blogspot.com">Class Log</a></li>
</ul>
<br />
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">School</a></li>
<li><a href="contact.html">Mr. Hodges</a></li>
</ul>
<br />
</div>
<div id="rightnav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="middle">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
</div>
</div>
</body>
</html>
http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. 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! 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. 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. 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! 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 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? 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! 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 |
|||||||