CODEWITHSUNDEEP
htmlcss
user593747
user593747

Reputation: 1514

Using CSS only: change a div's background color on hover

I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone.

My Problem: My code below attempts to do this, the link works fine BUT when I hover over the div the background doesn't change color. What do you think I am doing wrong & how do you think I can fix this to make the div change background color on hover?

I have a feeling that I should place the link(a element) inside the div(instead of outside) but I can never get the a to stretch to the full space of the div that way.

<html>
<head>
    <style type="text/css">
    <!--
        body        { background-color: RGB(218,238,248); }
        #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                      border-width:thin; border-style:solid; border-right-width:thick;
                      border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }

        /* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
        .sidebarLink { color: #000000; text-decoration: none; }
        .sidebarLink a:hover { background-color: blue; }

        /* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
    -->
    </style>
</head>
<body>

    <a class="sidebarLink" href="facilitiesForHire.html">
        <div id="rentalAnnc">
            <p>We have a range of Education Facilities available for lease & hire</p>
        </div>
    </a>

</body>
</html>

Upvotes: 1

Views: 17138

Answers (4)

Mr Rudewords
Mr Rudewords

Reputation: 1

A bit late I'm sure but I've been looking at this recently and I think the better solution is:

<style type="text/css">
    body        { background-color: RGB(218,238,248); }
    #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                  border-width:thin; border-style:solid; border-right-width:thick;
                  border-bottom-width:thick; width: 300px; }
    a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
    a.sidebarLink:hover div { background-color: blue; }
</style>

<a class="sidebarLink" href="facilitiesForHire.html">
    <div id="rentalAnnc">
        <p>We have a range of Education Facilities available for lease & hire</p>
    </div>
</a>

Note: the rentalAnnc div does not have a background-color in it's style. This is in the link style only.

This way, the link covers the entire div exactly, not just a part of it. Also, any background-image applied to the div (eg with transparent areas for the background color to show through) will still be displayed!

Upvotes: 0

BalusC
BalusC

Reputation: 1108642

Add <!DOCTYPE html> to top of your page to make it a HTML5 document and use the outcommented #rentalAnnc:hover { background-color: blue; } rule. Having a <div> inside <a> is invalid in HTML3/4, but apparently valid in HTML5 (disclaimer: HTML5 standard is still not definitive). After adding the proper doctype and the outcommented rule, your current problem (and many other (future?) layout-related issues) should be solved in MSIE.

Don't forget to fix the other http://validator.w3.org errors after adding the doctype, such as a missing title and so on. Browser behaviour is undetermined on invalid HTML.

Upvotes: 1

Will
Will

Reputation: 20235

You should put the <a> inside the <div>. If you want it to stretch across the full space, add display: block to its style.

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>We have a range of Education Facilities available for lease and hire</p>
    </a>
</div>

a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }

Upvotes: 1

No Results Found
No Results Found

Reputation: 102735

:hover support is not great for non-anchor elements in older browsers and IE, so you can attach the hover psuedo class to the <a> instead and use a simple descendant selector:

a:hover #rentalAnnc { background-color: blue; }

Upvotes: 3

Related Questions