CODEWITHSUNDEEP
jqueryhtmlcss
user23524697
user23524697

Reputation: 147

How do I use jQuery to create hovering elements?

I'm new to jQuery and learning how to make it interact with my actual code so the pages are more interactive but I'm a bit confused with all the functions. I understand the principles of jQuery which I find quite easy but, I just don't really know how to call functions. Right now I'm working on a test page to practice and get used to it.

I'm trying to accomplish 2 things I have seen on a shopping website.

First thing: Make words appear on mouseover an image like this example

Second thing: Make a box appear with more details and information when image is clicked and make appeared box disappear when "closed" is selected (please use previous link example to see the effect I'm trying to accomplish).

So to test my skills, I have started this test code to try and accomplish what I want.

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < /script>
<script>

$( img ).mouseenter( handlerIn ).mouseleave( handlerOut );


</script >
.img {
  background-color: #f6f6f6;
  width: 241px;
  height: 341px;
}
<body>
  <div class="img">an image
    <div>
</body>

I know it has something to do with this $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ); for the first thing I'm trying to do.

For the second thing I know it has something to do with the .toggle()

Be nice with me guys, I'm a rookie and just starting to figure out how to start using jQuery.

Upvotes: 0

Views: 450

Answers (1)

Thijs Riezebeek
Thijs Riezebeek

Reputation: 1812

You could use the hover function: $( selector ).hover( handlerIn, handlerOut ) see: http://api.jquery.com/hover/

  // You want this code to run after the document has been loaded
  jQuery(document).ready(function() {
        // Use .img to target all elements with the class 'img'
        $('.img').hover(function() {
            // This function is called when the mouse hovers over the element
            // Because this is function is an eventListener that is attached
            // to an element, you can call 'this' to target the element
            // that is being hovered over
            var image = jQuery(this);

            // Use the .append() function to insert content into an element
            image.append("<div class='quick-view'>Quick view</div>")
        },
        function() {
            // This function is called when the mouse leaves the element
            // In here we want to remove the quick-view element, so
            // first we have to find it. Again, use 'this' to
            // target the element that is hovered over.
            var image = jQuery(this);

            // Use the .find() function to look for the quick-view element
            // inside the element with the .img class:
            var quick-view = image.find('.quick-view');

            // Now to remove the quick-view element, use .remove()
            quick-view.remove();
        });
    });

The code below will attach an onClick listener to the quick-view element, so that you can tell your script what to do when the quick-view element is clicked.
Note that we are not using

 jQuery('.quick-view').click(function() {});

This is because this will attach the click function to all elements with the 'quick-view' class, after the document is loaded. But after the document is loaded, there are no elements with the 'quick-view' class. These elements are created dynamically. Therefore we have to use a special jQuery function, the .on() function, which we will attach to the body element. See http://api.jquery.com/on/

jQuery('body').on('click', '.quick-view', function() {
    // Even though the listerner seems to be attached to the body
    // you can still call 'this' to target the quick-view element.
    // In here you can add the box with more details to the body
    jQuery('body').append("<div class='more-info'>more info</div>")
});

The functionality for the close element can be implemented in much the same way (always use .on() for elements that aren't created on load, but are created dynamically).

Upvotes: 1

Related Questions