Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Derek Vha
Derek Vha
10,452 Points

JQuery - Hover Function Help

Hi All,

I am playing around with the Hover() function in Jquery. I have it working so that if the mouse runs on the div called 'clickme' the image appears/disappears.

However I am just trying to limit this Hover to the actual text 'Click here' and not the whole div which spans the entire page. See screenshot for this issue.

How can I fix this?

many thanks

$(document).ready(function () {




  $('#clickme').hover(function() {
    $("#squirel").slideToggle();
  });



});

<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>

<body>
<div id="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="europe tour">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="asia tour">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
  </ul>
</div>
<div id="clickme">
  Click here
</div>
<img id="squirel" src="http://www.extremetomato.com/misc/files/Random%20images/Squirrel.jpg" alt="" width="200" height="253">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="application2.js"></script>
</body>
</html>

[img] https://imgur.com/9o7L8mt [/img]

1 Answer

Osaro Igbinovia
.a{fill-rule:evenodd;}techdegree
Osaro Igbinovia
Full Stack JavaScript Techdegree Student 15,928 Points

Hi Derek, I changed a few things in your markup so the hover() only affects the text 'Click here'. I wrapped the text in a span and added an id of 'click' to easily select it. I then chained the hover() to the span.

  <div id="clickme">
         <span id = 'click'>Click here</span>
    </div>

$(document).ready(function () {

  $("#click").hover(function () {
   $("#squirel").slideToggle();
  });

});

This way only the text 'Click here' is affected.

Derek Vha
Derek Vha
10,452 Points

Thank you. For some reason I couldn't figure out that small change!