HTML CSS Jquery Click() function

Question

I want to have click effect using jquery. When I click the first time, it changes the condition. When I click the object the second time or click other places, it returns to the original . I make it changed background color the first time, but how on 2nd time?

$(document).ready(function(){
  $('.fas').on('click', function(){
    $(this).css({
      'background-color': 'white',
      "color": '#40415a'
    });
  });
});

*{
  padding: 0;
  margin: 0;
}
body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #40415A;
}
i.fa-mouse-pointer{
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #40415A;
  border: 1px solid #fff;
  padding: 40px 100px 40px 100px;
  transition: .3s;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <i class="fas fa-mouse-pointer"></i>
    <script src="script.js"></script>
  </body>
</html>

for the second click, you need the color to come back to default color you mean? — Manjuboyz
– Manjuboyz, Commented Mar 27, 2020 at 8:33

Ziad Darwich · Accepted Answer · 2020-03-27 08:34:46Z

$(document).ready(function(){
  $('.fas').on('click', function(){
    $(this).toggleClass('active')
  });
});

*{
  padding: 0;
  margin: 0;
}
body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #40415A;
}
i.fa-mouse-pointer{
  font-size: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #40415A;
  border: 1px solid #fff;
  padding: 40px 100px 40px 100px;
  transition: .3s;
}
i.fa-mouse-pointer.active{
  background-color: white;
  color: #40415a;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <i class="fas fa-mouse-pointer"></i>
    <script src="script.js"></script>
  </body>
</html>

Martin M · Accepted Answer · 2020-03-27 08:35:07Z

0

I a solution that would work for you would be to create a class with your css, and then use jQuery .toggleClass function to toggle the class on and off from the element.

answered Mar 27, 2020 at 8:35

Martin M

4658 silver badges22 bronze badges

1 Comment

Anurag Srivastava Over a year ago

If you could post a working code it would be a better answer.

Collectives™ on Stack Overflow

HTML CSS Jquery Click() function

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related