I'm having trouble with defining a hover function for the buttons I created. It seems like the if/else condition is not working properly. What I want to achieve is changing the background color of my button when hovering based on a specific condition. However, the function seems to be skipping the IF statement and only executing the ELSE block, regardless of whether the condition is met or not.
function clickHTML() {
$("#html").css("background-color", "#F5FEFE");
}
$(".button").hover(function() {
if ($(this).css("background-color") == "#F5FEFE") {
$(this).css("background-color", "#AFF7F7");
console.log('inside the if branch; color changed');
} else {
//alert($(this).css("background-color"));
$(this).css("background-color", "#E4E4E4");
}
}, function() {
$(this).css("background-color", "#EDEDED");
$("#html").css("background-color", "#F5FEFE");
});h3,
html,
body {
font-family: Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
#header-bar {
width: 100%;
height: 50px;
background-color: #EDEDED;
}
h3 {
padding: 14px 400px 0px 5px;
float: left;
}
.button-group button {
width: 100px;
background-color: #EDEDED;
margin: 10px 0;
border: 1px solid black;
color: black;
padding: 5px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
float: left;
border-radius: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>
<body onload="clickHTML()">
<div id="header-bar">
<h3> CodePlayer </h3>
<div class="button-group">
<button id="html" class="button"> HTML </button>
<button id="CSS" class="button"> CSS </button>
<button id="js" class="button"> JavaScript </button>
<button id="output" class="button"> Output </button>
</div>
</div>
</body>