JQuery function not working please help!

JavaScript
1

Hello,
I was trying to develop something where on hover of a paragraph the background colour of a div tag that contained all the content changed correspondingly.

So the html is something like this:

<div id="container">
<p>Change the colour</p>
</div>

I did something simple first where the text colour of the paragraph changed on hover of that paragraph. Now that works completely fine.

Here is the code:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	
  <p>Hovering on me changes the text colour of the paragraph</p>

  <p>Same with this one</p>
  
<script>
  $("p").hover(
		function () {
			$(this).css("color","red");
  },
		function () {
			$(this).css("color","blue");
  });
</script>
</body>
</html>

So I edited a code a bit to do what I mentioned above the changing the background-colour on the container on hover of a paragraph:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:white; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<div id="container" style="background:blue;">
  <p>Hovering on me should change the container's background colour</p>

  <p>Or hover on me.</p>
  </div>
<script>
  $("p").hover(
		function () {
			$("container").css("background","red");
  },
		function () {
			$("container").css("background","blue");
  });
</script>
</body>
</html>

but it does not work :mad: :frowning:

Could someone help me get the latter code working so that the background of the container will change on hover of a paragraph?

Thanks in advance and Regards,
Team 1504.

2

Thank you! Reorganising things so that the HTML loads first worked. :weee:

Thanks and Regards,
Team 1504

3

kohoutek,
When I changed the reference of the container to the ID of the container as you wrote below that example worked.

However, When I applied that same concept and basically the same code in another instance it doesnt seem to work :mad:

Here is the second application of the idea:

<html>
<head>
<style>
	#container{
	position:relative;
  	background:url(iceberg.png);
	margin:auto;
	height:1098px;
	width:1400px;

}

#container ul.hotlink {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}
#container ul.hotlink li {
    position:absolute;
    text-indent:-999em;
}
#container ul.hotlink li a {
    display:block;
    width:100%;
    height:100%;
    outline:0;
}
#container ul.hotlink li a:hover {
    z-index:99;
}
ul.hotlink li.lifesaver {
    top:463px;
    left:60px;
    width:163px;
    height:157px;
	color:#000;
}

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(".lifesaver").hover(
        function () {
            $("#container").css("background","red");
  },
        function () {
            $("#container").css("background","url(iceberg.png)");
  });
</script>
</head>
<body>
<div id="container">
<ul class="hotlink">
        <li class="lifesaver"><a title="Click on me to go to sitepoint.com" href="http://www.sitepoint.com">Sitepoint</a>Hover on the box above to change the container's background!</li>
</ul>
</div>
</body>
</html>

I dont think I am doing anything stupid and I apologise if i am.

Hear from you soon and Regards,
Team 1504

4

You have to reference the ID of container (#container), so instead of this:

  $("p").hover(
        function () {
            $("container").css("background","red");
  },
        function () {
            $("container").css("background","blue");
  });

Do this:

  $("p").hover(
        function () {
            $("#container").css("background","red");
  },
        function () {
            $("#container").css("background","blue");
  });
5

At the time that the script runs while the page is loading, the lifesaver part of the HTML does not yet exist.

Wait until the page has loaded before applying the script, by placing the script inside a jQuery callback.


$(function () {
    ...
});

for example:


$(function () {
    $(".lifesaver").hover(
        function () {
            $("#container").css("background","red");
    },
        function () {
            $("#container").css("background","url(iceberg.png)");
    });
});
6

In the code id put in my post below I referred to an image of the name iceberg.png

Here is said image, i hope it can help you help me change the container’s background on hover of the lifesaver :slight_smile:

Thanks in advance,
Team 1504