Как сделать так, чтобы кнопка после нажатия когда становилась оранжевой, при наведении курсора темнела

Question

let milsec = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";
let start = document.getElementById("startStop");
function stopWatch() {
  milsec++;
  if (milsec / 10 === 1) {
    milsec = 0;
    seconds++;
    if (seconds / 60 === 1) {
      seconds = 0;
      minutes++;
      if (minutes / 60 === 1) {
        minutes = 0;
        hours++;
      }
    }
  }
  if (milsec < 10) {
    displayMilsec = milsec.toString();
  }
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }
  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }
  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
function startStop() {
    if (status === "stopped") {
    interval = window.setInterval(stopWatch, 100);     
   document.getElementById("startStop").innerHTML = "Stop";   
   document.getElementById("startStop").style.background = '#fca903';   
   status = "started";
  } else {
      window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";     
    document.getElementById("startStop").style.background = '#4beb23'; 
    document.getElementById("startStop").style = '#40c71e';
    status = "stopped";
  }
}

.a1 {
  background: #4beb23;
  cursor: pointer;
}
.a1:hover {
background: #40c71e;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stopwatch</title>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div id="display">
      00:00:00
    </div>
    <div class="buttons">
      <button type="b1" class="a1" id="startStop" onclick="startStop()">Start</button>
    </div>
  </div>
</body>
</html>

Answer 1

.a1 {
    background: #4beb23;
    cursor: pointer;
}
.a1:hover {
    background: yellow;
}

БЛОГ НА HUSL

Как сделать так, чтобы кнопка после нажатия когда становилась оранжевой, при наведении курсора темнела

Ответы (1 шт):