onemouseover how to add a backgroundcolor change?

Question

Hi just wondering how to change the color of a button onhover? Please take a look at my jquery- if you could fill me in on how to to do this in original JS as well?

HTML

<button class=J>taco truck</button>

CS

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

JS

$(".J").onmouseover(function taco(){
$(".J").style.backgroundColor = "blue";
})

I know I could do that in CSS too- just practicing some basic JS — Rahul Menon, May 23 '18 at 00:51
I just noticed you are posting questions where the answer have been easily found on any tutorial site if you only took the time to check it out. We are here to help, though no effort of your own have been made to make a plain javascript conversion, nor is your jQuery close to what's on their pages. I vote to close both your questions because of that. — Asons, May 24 '18 at 17:56
I'm voting to close this question as off-topic because no real effort have been made to solve what's asked for — Asons, May 24 '18 at 17:57

muecas · Answer 1 · 2018-05-23T01:05:47.227

Try this:

$('.J').mouseenter(function() {
    $(this).css('background-color', 'red');
});

Or use the jQuery hover function so you could add mouse over and mouse out events at the same time:

$('.J').hover(function() {
    $(this).css('background-color', 'red');
}, function() {
    $(this).css('background-color', 'blue');
});

So you could add both mouseenter and mouseleave events at the same time.

Learn more about .hover() here.

Or you could simply do it using css:

.J {
    background-color: blue;
}
.J:hover {
    background-color: red;
}

Jonathan Rys · Answer 2 · 2018-05-23T01:30:45.953

There are multiple ways to change the background color when the mouse enters a region using only JS/jQuery:

$(".J").on("mouseover", function(e){
   e.target.style.backgroundColor = "blue";
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

or

document.querySelector(".J").onmouseover = function(e){
   $(e.target).css("backgroundColor", "blue");
}

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

or

$(".J").hover(function(e){
   e.target.classList.add("blue");
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=J>taco truck</button>

...to list a few.

But I think what you want is this:

$(".J").hover(function(e) {
  $(e.target).toggleClass("blue");
})

.J{
  background-color: red;
  width: 1000px;
  height: 200px;
}

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <button class=J>taco truck</button>

onemouseover how to add a backgroundcolor change?

2 Answers2