I'm hoping someone can help me with an issue I am having. I am trying to change the background color of my page when mousing over a nav link on the page. I have tried to use jquery for this (last lines of my js code) but it doesn't seem to be working. I think some of my other Js is interfering in some way because it worked on a simple test page before. https://codepen.io/adamkelly153/pen/gOGaJYq
$('#hover-01').on('mouseenter', function() {
$('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function() {
$('#hover-change').css('background-color', 'red');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>Any help much appreciated! Sorry if I have missed some key info, happy to provide it. Adam
I change #hover-01 to .proj-cat and worked!
$('.proj-cat').on('mouseenter', function(){
$('#hover-change').css('background-color', 'blue');
});
$('.proj-cat').on('mouseleave', function(){
$('#hover-change').css('background-color', 'red');
});
Always keep your cdn above your jquery because jquery only works when cdn has been loaded..
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$('#hover-01').on('mouseenter', function() {
$('#hover-change').css('background-color', 'blue');
});
$('#hover-01').on('mouseleave', function() {
$('#hover-change').css('background-color', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-01">Hover this!</div>
<div id="hover-change">Background changes</div>