Home/ Questions/Q 6581107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:06:39+00:00

I have a div that is a link to another page. When someone hovers

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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; }
    • 0