how to edit css hover with html jquery script

Question

Before asking, i want to let you know that the following code has been taken from this video, so all credits to him.

JS

$(".product-colors span").click(function(){
    $(".product-colors span").removeClass("active");
    $(this).addClass("active");
    $("body").css("background",$(this).attr("data-color"));
    $(".product-price").css("color",$(this).attr("data-color"));
    $(".product-button").css("color",$(this).attr("data-color"));
    $(".product-pic").css("background-image",$(this).attr("data-pic"));
});

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="product-card">
      <h1>Title</h1>
      <p>Thing<p>
      <div class="product-pic"></div>
      <div class="product-colors">
        <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span>
        <span class="green" data-color="#badc58" data-pic="url(2.png)"></span>
        <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span>
        <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span>
      </div>
      <div class="product-info">
        <div class="product-price">1.000.000$ </div>
        <a href="#" class="product-button">BUY</a>
      </div>
    </div>
  </body>
</html>

$(".product-colors span").click(function() {
  $(".product-colors span").removeClass("active");
  $(this).addClass("active");
  $("body").css("background", $(this).attr("data-color"));
  $(".product-price").css("color", $(this).attr("data-color"));
  $(".product-button").css("color", $(this).attr("data-color"));
  $(".product-pic").css("background-image", $(this).attr("data-pic"));
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="product-card">
    <h1>Title</h1>
    <p>Thing
      <p>
        <div class="product-pic"></div>
        <div class="product-colors">
          <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span>
          <span class="green" data-color="#badc58" data-pic="url(2.png)"></span>
          <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span>
          <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span>
        </div>
        <div class="product-info">
          <div class="product-price">1.000.000$ </div>
          <a href="#" class="product-button">BUY</a>
        </div>
  </div>
</body>

</html>

basically i want to edit the hover of "product-button" on click and change his background but i don't know how to do it, cause i'm very new to html/css and this stuff. I tried too "googling" too and i found out that jquery is an old and outdated language, so i can use javascript instead of this? Thank you for your help

Actually, jquery (it's a framework) is the bread and butter of frontend development, but it is based on javascript :) — curveball, Sep 09 '20 at 11:33
jquery is not outdated, but if you wish to rewrite it to plain javascript that is possible ofcourse — Ramon de Vries, Sep 09 '20 at 11:33
jQuery IS JavaScript but JavaScript is not jQuery since jQuery is written in JavaScript and provides a method to more easily write to multiple browsers without have to do excess browser feature detection yourself. — Mark Schultheiss, Sep 09 '20 at 11:57

Oddrigue · Answer 1 · 2020-09-09T13:58:13.610

If you wish to set something in Javascript/JQuery when your element is hovered, you can do so by using Jquery's .mouseover, see :

$(".product-colors span").click(function(){
    $(".product-colors span").removeClass("active");
    $(this).addClass("active");
    $("body").css("background",$(this).attr("data-color"));
    $(".product-price").css("color",$(this).attr("data-color"));
    $(".product-button").css("color",$(this).attr("data-color"));
    $(".product-pic").css("background-image",$(this).attr("data-pic"));
});

$(".product-button").one('click', function(){
    $(this).mouseover(function() {
      $(this).css("background-color","green");
    });
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="product-card">
      <h1>Title</h1>
      <p>Thing<p>
      <div class="product-pic"></div>
      <div class="product-colors">
        <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span>
        <span class="green" data-color="#badc58" data-pic="url(2.png)"></span>
        <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span>
        <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span>
      </div>
      <div class="product-info">
        <div class="product-price">1.000.000$ </div>
        <a href="#" class="product-button">BUY</a>
      </div>
    </div>
  </body>
</html>

Note that you can also add effect on hovering an element via CSS pseudo-class :hover but you cant set anything to CSS pseudo-classes in Javascript/Jquery. For more details about that, see this question

i wanted to change THAT class ".product-button:hover" when you click the button — user14247653, Sep 09 '20 at 11:38
I edited my answer, let me know if this is what you are looking for — Oddrigue, Sep 09 '20 at 11:51
`$(".product-button").click(function(){ $(this).mouseover(function() {` adds a new `mouseover` event handler on every click - not a good thing. — Mark Schultheiss, Sep 09 '20 at 11:59
@MarkSchultheiss Right, didn't think of it. Is there an alternative to set-if-not-already-set ? — Oddrigue, Sep 09 '20 at 12:01
@Oddrigue use the `.one()` to do it once - instead of `.on()` — Mark Schultheiss, Sep 09 '20 at 13:29

Rayees AC · Answer 2 · 2020-09-09T15:50:24.700

Try this instead,

Use mouseover(function(){..} and mouseout(function(){..}

$(".product-button").mouseover(function() {
    $(this).css("background","#ffffff");
    $(this).css("color","#00cc00");
});
$(".product-button").mouseout(function() {
    $(this).css("color","#ffffff");
    $(this).css("background","#00cc00");
});

Working Demo

$(".product-button").mouseover(function() {
    $(this).css("background","#ffffff");
    $(this).css("color","#00cc00");
});
$(".product-button").mouseout(function() {
    $(this).css("color","#ffffff");
    $(this).css("background","#00cc00");
});

.product-card{
  box-shadow:3px 2px 10px #555;
  width:450px;
  height:500px;
  padding:30px;
  margin:0 auto;
}
.product-pic img{
  text-align:center;
  max-width:100%;
  height:auto;
}
.product-button{
  border:3px solid #00cc00;
  color:#ffffff;
  text-decoration:none;
  padding:10px 20px;
  display:inline-block;
  width:100px;
  margin-top: 20px;
  border-radius:30px;
  background:#00cc00;
  text-align:center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="product-card">
      <h1>The Shoes</h1>
      <p>Shoes<p>
      <div class="product-pic"><img src="https://i.stack.imgur.com/y5acE.png"></div>
      <div class="product-info">
        <div class="product-price">1.000.000$ </div>
        <a href="#" class="product-button">BUY</a>
      </div>
    </div>
  </body>
</html>

The demo with click circles change button color and body

$(".product-button").mouseover(function() {    
    var bgcolor = $(".product-colors span.active").css("background-color");
    $(this).css("background-color","#ffffff");
    $(this).css("border-color",bgcolor);
});
$(".product-button").mouseout(function() {
    var bgcolor = $(".product-colors span.active").css("background-color");
    $(this).css("background-color",bgcolor);
    $(this).css("border-color",bgcolor);
});

//to change color of body 
$(".product-colors span").click(function(){
    $(".product-colors span").removeClass("active");
    $(this).addClass("active");
    var bgcolor = $(this).css("background-color");
    $("body").css("background",bgcolor);
    $(".product-button").css("background-color",bgcolor);
    $(".product-button").css("border-color",bgcolor);
});

.product-card{
  box-shadow:3px 2px 10px #555;
  width:450px;
  height:550px;
  padding:30px;
  margin:0 auto;
  background:#fff;
}
.product-pic img{
  text-align:center;
  max-width:100%;
  height:auto;
}
.product-button{
  border:3px solid #7ed6df;
  color:#111;
  text-decoration:none;
  padding:10px 20px;
  display:inline-block;
  width:100px;
  margin-top: 20px;
  border-radius:30px;
  background:#7ed6df;
  text-align:center;
}
.product-colors span{
  width:30px;
  height:30px;
  display:inline-block;
  border-radius:50%;
  margin-bottom:10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="product-card">
      <h1>The Shoes</h1>
      <p>Shoes<p>
      <div class="product-pic"><img src="https://i.stack.imgur.com/y5acE.png"></div>
      <div class="product-colors">
        <span class="blue active" style="background-color:#7ed6df" data-pic="url(1.png)"></span>
        <span class="green" style="background-color:#badc58;" data-pic="url(2.png)"></span>
        <span class="rose" style="background-color:#ff7979" data-pic="url(4.png)"></span>
        <span class="yellow" style="background-color:#f9ca24" data-pic="url(3.png)"></span>
      </div>
      <div class="product-info">
        <div class="product-price">1.000.000$ </div>
        <a href="#" class="product-button">BUY</a>
      </div>
    </div>
  </body>
</html>

i wanted to change the background background of product button hover — user14247653, Sep 09 '20 at 12:04

Mark Baijens · Answer 3 · 2020-09-09T13:31:56.087

I think the best way to do it is by using the fact that you set an active class on the active color.

When we use jQuery's hover() function we can set an event handler for the mouseenter and mouseleave events.

The mouseenter event sets the color to the active color in the current .product-card. The mouseleave event removes this color.

This way the logic also works if you have multiple products on 1 page as you can see in the example below.

jQuery is not an outdated framework. It's still updated regularly. The power of jQuery is that you don't have to worry about different browser implementations. However these days browsers follow the standard a lot better then in the past so it does not bring that much advantages anymore unless you want to support older browsers (Mainly Internet Explorer). The easy to use syntax is still loved by many including yours truly which is also a good reason to still use jQuery. Because jQuery is build on top of Javascript you can also do anything jQuery does with plain Javascript.

$(".product-colors span").click(function() {
  $(".product-colors span").removeClass("active");
  $(this).addClass("active");
});

$('.product-button').hover(function(){
  var $this = $(this);
  var hoverColor = $this.closest('.product-card').find('.product-colors .active').data('color');
  $this.css('color', hoverColor)
}, function(){
  $(this).css('color', '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-card">
  <h1>Product 1</h1>
  <p>Thing</p>
  <div class="product-pic"></div>
  <div class="product-colors">
    <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)">1</span>
    <span class="green" data-color="#badc58" data-pic="url(2.png)">2</span>
    <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)">3</span>
    <span class="rose" data-color="#ff7979" data-pic="url(4.png)">4</span>
  </div>
  <div class="product-info">
    <div class="product-price">1.000.000$ </div>
    <a href="#" class="product-button">BUY</a>
  </div>
</div>

<div class="product-card">
  <h1>Product 2</h1>
  <p>Thing</p>
  <div class="product-pic"></div>
  <div class="product-colors">
    <span class="blue active" data-color="#ff0000" data-pic="url(1.png)">Red</span>
    <span class="green" data-color="#00ff00" data-pic="url(2.png)">Green</span>
    <span class="yellow" data-color="#0000ff" data-pic="url(3.png)">Blue</span>
  </div>
  <div class="product-info">
    <div class="product-price">1.000.000$ </div>
    <a href="#" class="product-button">BUY</a>
  </div>
</div>

Mark Schultheiss · Answer 4 · 2020-09-09T18:51:25.967

Since this is in part a learning exercise, I will add a second group and show how to use classes to toggle colors and active state. Try clicking the "colors" and mouse over the "button" to see what happens.

In-in comments describe each part.

$(".product-colors")
  .on('click', 'span.pick', function(event) {
    // allows multiple groups
    let group = $(event.delegateTarget).closest(".product-card");
    // get class to toggle
    let classChoice = $(this).data("color");
    // turn active one in group to not active
    group.find("span.pick").not(this).toggleClass("active", false);
    $(this).toggleClass("active");
    //what we toggle color to on click
    let toggleMe = group.find(".choice, .product-price");
    toggleMe.removeClass('blue yellow green rose');
    toggleMe.toggleClass(classChoice, $(this).is('.active'));
    group.find(".product-pic").css("background-image", $(this).data("pic"));
  });

// turn one active, could be done multiple ways
$(".product-colors")
  .each(function() {
    let thisDefault = ".pick." + $(this).data("default");
    $(this).find(thisDefault).trigger('click');
  });

// add current active color on mouse enter
$(".product-button")
  .on('mouseenter', function(event) {
    let group = $(event.delegateTarget).closest(".product-card");
    let activeChoice = group.find(".product-colors").find('.pick.active').data("color");
    $(this).toggleClass(activeChoice);
  })
  .on('mouseleave', function(event) {
    $(this).toggleClass('blue yellow green rose', false);
  });

.green {
  background-color: #badc58;
}

.yellow {
  background-color: #f9ca24;
}

.blue {
  background-color: #7ed6df;
}

.rose {
  background-color: #ff7979;
}

.pick {
  border: solid 1px white;
}

.active {
  border: solid 1px black;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="product-card">
    <h1>Title</h1>
    <p class="choice">Thing
      <p>
        <div class="product-pic"></div>
        <div class="product-colors" data-default="yellow">
          <span class="blue pick" data-color="blue" data-pic="url(1.png)">blue</span>
          <span class="green pick" data-color="green" data-pic="url(2.png)">green</span>
          <span class="yellow pick" data-color="yellow" data-pic="url(3.png)">yellow</span>
          <span class="rose pick" data-color="rose" data-pic="url(4.png)">rose</span>
        </div>
        <div class="product-info">
          <div class="product-price">1.000.000$ </div>
          <a href="#" class="product-button">BUY</a>
        </div>
  </div>
  <div class="product-card">
    <h1>Pick Me</h1>
    <p class="choice">Other Thing
      <p>
        <div class="product-pic"></div>
        <div class="product-colors" data-default="blue">
          <span class="blue pick" data-color="blue" data-pic="url(1.png)">blue</span>
          <span class="green pick" data-color="green" data-pic="url(2.png)">green</span>
          <span class="yellow pick" data-color="yellow" data-pic="url(3.png)">yellow</span>
          <span class="rose pick" data-color="rose" data-pic="url(4.png)">rose</span>
        </div>
        <div class="product-info">
          <div class="product-price">1.000.000$ </div>
          <a href="#" class="product-button">BUY</a>
        </div>
  </div>
</body>

</html>

how to edit css hover with html jquery script

4 Answers4