Currently, I am in the process of learning HTML, CSS, and a bit of jQuery as I work on building my website. I have been using Notepad++ for coding and up until now, my HTML and CSS code has been functioning correctly. However, I encountered some difficulties when attempting to implement jQuery for animations. Specifically, I wanted to create an animation where the "header" div would fade to 1 opacity upon hovering (with initial opacity set to 0.5 in the CSS).
#header {
float: right;
position: relative;
width: 1100px;
height: 110px;
margin-top: -130px;
margin-right: 0px;
background-color: #e68a00;
opacity: 0.5;
}$(document).ready(function() {
$("#header").mouseenter(function() {
$("#header").fadeTo('fast', 1)
});
$("#header").mouseleave(function() {
$("#header").fadeTo('fast', 0.5)
});
});Despite following this approach, I found that it did not produce the desired result. I am unsure if I have properly enabled jQuery or whether there is an issue with my code.
Below are the links used in my project:
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>I appreciate any assistance provided! :)
P.S English is not my native language, so please excuse any grammatical errors in my writing.