CODEWITHSUNDEEP
javascriptjqueryhtml
Dan
Dan

Reputation: 517

change hover color button click

I want the div onhover background color to change to blue once button is clicked.

In this example, it changes the normal background color as well:

$(document).on("click", "button", function() {
  $(".box").on("mouseover", function() {
    $(".box").css("background", "blue")
  });
})
.box:hover {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>

Upvotes: 1

Views: 676

Answers (4)

Varlain Systems
Varlain Systems

Reputation: 306

In your jQuery, add an eventhandler for mouseout, to remove the background.

$(document).on("click", "button", function () {
    $(".box").on("mouseover", function () {
        $(".box").css("background", "blue")
    });
    $(".box").on("mouseout", function () {
        $(".box").css("background", "none")
    });
})

Upvotes: 0

jvk
jvk

Reputation: 2201

Your Jquery DOM was incorrect,

Here is how it does

$(document).ready(function(){

// jQuery methods go here...

});

$(function(){
$('button').click(function(){
 $(".box").on("mouseover",function(){
 $('.box').css("background","blue")
 });
   $(".box").on("mouseout",function(){$(".box").css("background","")
   });

})
});
.box:hover{background:red;}   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>

<div class="box">Hello</div>

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176906

make use of hover() jquery function and make use of class instead of css 

$(".box").hover(function(){
    $(this).addClass("hover_me");
}, function(){
    $(this).removeClass("hover_me");
});

css class

.hover_me {
  background: blue;
}

Upvotes: 1

MikeS
MikeS

Reputation: 1764

Try

$(document).on("click","button",function(){

    $(".box").on("mouseover",function(){$(".box").css("background","blue")});
    $(".box").on("mouseout",function(){$(".box").css("background","")});

})
.box:hover{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<button>Change hover color</button>
<hr/>

<div class="box">Hello</div>

Upvotes: 3

Related Questions