Hover the mouse over the small icon to display the big icon, hover the mouse over the icon

Hover the mouse over the small icon to display the big icon, hover the mouse over the icon

The page element is div-> table-> tr-> td. For images in td, hover the cursor over to display a large image. If you move the cursor away, the large image disappears:

First, you need to know the syntax of the dom element created by jq; $ (html Tag ), for example, an img label var img =$ (" </img>") is created here ");

Second, the hover method is used for hovering over and leaving the mouse. The syntax is $ (selector). hover (inFunction, outFunction ),
Specifies the two functions to run when the mouse pointer is hovering over the selected element. InFunction is required and outFunction is optional.

This method triggers the mouseenter and mouseleave events.

NOTE: If only one function is specified, it runs on the mouseenter and mouseleave events.

InFunction is defined here to determine the location of the large image, and outFunction is the img node created for remove.

1) It is not enough to create only objects. You also need to add the created objects to the document node. The method used in jq is as follows:

Append ()-insert content at the end of the selected Element
Prepend ()-insert content at the beginning of the selected Element
After ()-insert content after the selected Element
Before ()-insert content before the selected Element

Here, the application first assigns a value to the img, and then append:

img.attr("src", $element.find(".prePhoto").attr("src"));$element.append(img);

2) When determining the location of a large image, three parameters are required. The first parameter is the reference element. Here, the parents element of td is selected, tr: var $ element = $ (this ). parents ("tr ").

The second is the target element created this time. Here is img, and the third is the regional element that can appear in the target element. Generally, it is a large element. Here is the parent element div of the table, $ (". fatherDiv ")

Therefore, the specific method is,

Function getPosition ($ element, img, $ (". fatherDiv ") {var top = $ element. position (). top + $ element. height (); // get top: top of the reference element + height of the reference element. Var maxBottom = $ (". fatherDiv"). height (); // obtain the height of the region element. Var minTop = 40; if (top + img. height ()> maxBottom) {top = $ element. position (). top-img. height () ;}if (top <minTop) {// two if judgments ensure that the target element always appears on the screen no matter how you move the mouse on the pulley. Top = minTop;} var $ firstElement = $ (". fatherDivtbody tr" has 0];;;img.css ('top', top-$ firstElement. position (). top + 40 );}

3) remove the created object; $ element. remove ();

4) the css of the target element must meet the following conditions: position: absolute

.changePhoto {position: absolute;width: 120px;height: 160px;left: 300px;right: 10px;float: right;z-index: 9;}

Articles you may be interested in:

• Hover the mouse over the advertisement effect in the webpage
• CSS mouse hover menu image exchange technology implementation
• Navigation bar that is dynamically tumble when the mouse is hovering in javascript
• Usage of hover and usage of live (mouse hover effect)
• A simple JS mouse hover effect method
• An example of how jQuery zoomed in an image when hovering over the mouse
• JQuery implements automatic list looping and scrolling.
• JQuery implementation of the mouse hover display Prompt window method