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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Any help much appreciated! Sorry if I have missed some key info, happy to provide it. Adam

CodePudding user response：

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');
});

https://codepen.io/kian-kpt/pen/zYEvQjW

CodePudding user response：

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>