Here is the HTML code snippet I've put together, along with my script. While I admit it might look a bit messy, please bear with me as I'm still in the learning phase. If anyone could offer some assistance on this matter, I would be extremely grateful. Many thanks in advance!
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
... <!-- Other HTML tags here -->
<p id="circle2" class="circle"></p>
</body>
</html>
And now, presenting my CSS:
* { margin: 0; padding: 0; }
@font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:relative;
... <!-- Remaining CSS properties listed here -->
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
I am facing a puzzling dilemma - why is my script only functioning within the 'home' section and not when applied to the 'circle' ID? Despite using the same classes and code for both elements, hovering over 'circle' doesn't trigger any changes. Can someone provide insight into this issue?