Display large icons when hovering small icons with mouse_javascript tips

The page element is div->table->tr->td. For pictures in td, the large picture will be displayed when the mouse is hovering over it, and the large picture will disappear when the mouse is left:

First you need to know the syntax of jq to create dom elements; $(html tag), for example, an img tag is created here var img = $("");

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

This method triggers mouseenter and mouseleave events.

Note: If only one function is specified, it will run on mouseenter and mouseleave events.

Here defined inFunction is to determine the position of the large picture, and outFunction is the img node created by remove.

1) It is not enough to just create an object. You also need to add the created object to the document node. The method used in jq is

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

To apply here, assign a value to the img first, and then append:

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

2) When determining the position of the large picture, three parameters are required. The first one 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, the third is the area element where the target element can appear, usually 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();//得到top：参照元素的top + 参照元素本身的height。
var maxBottom = $(".fatherDiv").height();//得到区域元素的height。
var minTop = 40;
if (top + img.height() > maxBottom) {
top = $element.position().top - img.height();
}
if (top < minTop) {//两个if判断，保证无论怎么划动鼠标的滑轮，目标元素始终出现在屏幕上。
top = minTop;
}
var $firstElement = $($(".fatherDivtbody tr")[0]);
img.css('top',top - $firstElement.position().top + 40);
}

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

4) The css of the target element needs to meet some conditions: position:absolute

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