CODEWITHSUNDEEP
htmlcssclassbackgroundbackground-color
user3723502
user3723502

Reputation: 7

Change the background of a div when a class is hovered and vice versa

I am working on a site and looking to change the background color of a div when a text class is hovered over. I have the following HTML

<ul class="action-list-three">
<li class="three.footer">
<a class="provider" href="#" target="_blank" style="text-decoration:none">TEXT</a><br />
</li>
</ul>

and the following CSS (want to change this BG Color):

.action-list-three a.provider {
background: #71CDF1;
padding-top: 5px;color: white;
margin-left: 50px;
border-radius: 5px;
padding-bottom: 35px;
padding-left: 60px;
padding-right: 60px;
font-size: 20px;
border: rgb(30, 128, 167);
border-style: inset;
border-width: 2px;
font-size: 18px;
margin-left: 742px;
display: block;
z-index: 1;
position: absolute;}

I know im probably missing some info, so can be viewed live at: sandbox.petassure.com

thanks for any help

Upvotes: 0

Views: 76

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24703

Just use the :hover declaration within CSS

.provider:hover{
   background: red;
}

JS Solution, very simple example

DEMO http://jsfiddle.net/x8dSP/3423/

$(function () {
    $(".test").hover(function () {
        $("div").css("background-color", "red");
    }, function () {
        $("div").css("background-color", "white");
    });

    $("div").hover(function () {
        $(".test").css("background-color", "red");
    }, function () {
        $(".test").css("background-color", "white");
    });
});

Upvotes: 1

user3721009
user3721009

Reputation:

Here i edited it:

Html:

<ul class="action-list-three">
<li class="three.footer">
<a class="provider" href="#" target="_blank" style="text-decoration:none">TEXT</a><br />
</li>
</ul>

CSS:

.action-list-three a.provider {
background-color: #71CDF1;
padding-top: 5px;color: white;
margin-left: 50px;
border-radius: 5px;
padding-bottom: 35px;
padding-left: 60px;
padding-right: 60px;
font-size: 20px;
border: rgb(30, 128, 167);
border-style: inset;
border-width: 2px;
font-size: 18px;
margin-left: 742px;
display: block;
z-index: 1;
position: absolute;}

.action-list-three a.provider:hover{
background-color: WHAT COLOR YOU WANT
}

Just change the "WHAT COLOR DO YOU WANT"

Upvotes: 0

Related Questions