Need Help with hover in style.css

addi · #1 21-Oct-2007, 21:27

Hi All -

I need some help with presentation of style.css file. I would like the background- color to be a of a different value when a mouse is hovered on the footer urls on my page than the background-color that appears for urls on other sections of the page.

I have taken the snippet of the HTML code that shows the footer code, along with the screen shot of the footer section of the page.

HTML Code:

<div id="footer">
<div id="footerWrap">
<ul class="tameHoriz">
<li><a href="t-about.aspx">About YourCompany.com</a> |</li>
<li><a href="t-returns.aspx">Returns</a> |</li>

<li><a href="t-faq.aspx">FAQ</a> |</li>
<li><a href="t-contact.aspx">Contact Us</a></li>
</ul>
<ul class="tameHoriz">
<li><a href="t-affiliate.aspx">Affiliates</a> |</li>

<li><a href="giftregistry.aspx">Gift Registry</a> |</li>
<li><a href="wishlist.aspx">Wishlist</a> |</li>
<li><a href="sitemap2.aspx">Site Map</a> |</li>
<li><a href="t-privacy.aspx">Privacy Policy</a> |</li>

<li><a href="t-security.aspx">Security</a></li>
</ul>
<br />
<ul class="tame">
<li>&copy; YourCompany.com 2007. All Rights Reserved.</li>
<li>Use of this website signifies your agreement to the <a href="http://localhost/newStore/t-privacy.aspx">Terms of Use</a> and <a href="http://localhost/newStore/t-privacy.aspx">Online Privacy Policy (updated 10-30-2007)</a>.</li>

</ul>
</div>
</div>

The problem is that the page does not show the color I have specified in the style.css file for the "tame" and "tameHoriz" classes.

Additionally, the page is behaving differently between IE 6.1 and Firefox 2.0.0.8. I am not sure if any other css setting supersedes what I have specified below.

snippet of code from style.css

CSS Code:

ul.tame, ul.tame li
{
margin: 0;
padding: 0;
display: list-item;
list-style: none;
}

ul.tame li
{
line-height: 1.25em;
color: Gray;
}

a.tame:hover
{
color: Blue;
background-color: Yellow;
}

---
a.tameHoriz:Hover
{
background-color: Gray;
border-color: Lime;
}

.tameHoriz, ul.tameHoriz li
{
margin: 0;
padding: 0;
list-style: none;
font-size: 1em;
}
ul.tameHoriz li
{
display: inline;
font-size: 1em;
}

What am I doing wrong here? Many thanks in advance for any help I can get on this.

JustinFox · #2 13-Jun-2008, 12:01

so, you want the div background to change colors when you hover of the link?

Code:


<a href ="http://www.somesite.com" onmouseover = "setBG()" onmouseout = "resetBG()">click here or hover</a>


<script type = "text/javascript">

function setBG()
{
// myfooter being the id of your footer div.
document.getElementById("myfooter").style.backgroundColor = "blue";
}

function resetBG()
{
document.getElementById("myfooter").style.backgroundColor = "white";
}

</script>

also you could change the css class reference of the element like so.

Code:


...
function resetBG()
{
var element = document.getElementById("myfooter");
element.className = "original";
}
...

Justin Fox

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Having problem with hover buttons to function	andyin	Java Forum	0	09-Jul-2006 06:06
Free Hover Ads Generator? Anyone?	zumbul	Web Design Forum	1	01-May-2006 14:52

Need Help with hover in style.css

Re: Need Help with hover in style.css