<
meta
charset
=
"
UTF-8
"
>
<
title
>
Title
</
title
>
<
script
src
=
"
../js/jquery-3.3.1.min.js
"
type
=
"
text/javascript
"
>
</
script
>
</
head
>
<
body
style
="
display
:
flex
;
"
>
<
div
id
=
"
div1
"
class
=
"
item
"
style
="
width
:
300px
;
height
:
300px
;
border
:
red solid 1px
;
"
>
</
div
>
<
div
id
=
"
div2
"
class
=
"
item
"
style
="
width
:
300px
;
height
:
300px
;
border
:
red solid 1px
;
"
>
</
div
>
<
div
id
=
"
div3
"
class
=
"
item
"
style
="
width
:
300px
;
height
:
300px
;
border
:
red solid 1px
;
"
>
</
div
>
<
script
>
$
(
'.item'
)
.
mouseover
(
function
(
event
)
{
console
.
log
(
event
)
;
console
.
log
(
event
.
target
.
id
)
;
console
.
log
(
event
.
pageX
)
;
console
.
log
(
event
.
pageY
)
;
}
)
;
</
script
>
</
body
>
</
html
>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript">...
当
鼠标
移到购物车上
时
，显示购物车的列表。
由于之前购物车是一个dom，购物车列表是另一个DOM，因此用到mouseover和mouseout
时
，
鼠标
只要离开购物车购物车列表就会消失，根本选不中购物车列表页。
解决方案：
在购物车DOM和购物车列表DOM上添加个父类DOM，然后对这个父类DOM添加mouseover和mouseout
事件
。
当
鼠标
移到购物车上
时
，调用mou
鼠标
悬浮在
div
1标签上
时
，显示对应的
div
2信息层,同
时
鼠标
在
div
2信息层上
时
，
div
2不隐藏。只有离开
div
1或者
div
2
时
，隐藏
div
2信息层
1、
div
1和
div
2之间不能有空隙
1、方法1（完成）
<style type="text/css">
.
div
1{
w
id
th: 100px;
height: 100px;
background: red;
.
div
2...
二、书写 JavaScript 部分，先
获取
两个
div
元素，如下图：
三、当
鼠标
移入第一个
div
时
，触发上述效果，因此我们使用"onmousemove"
事件
，如下图：
on...
var container = document.getElementBy
Id
('container');
document.add
Event
Listener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
container.style.top = y + 'px';
container.style.left = x + 'px';
解释一下代码：
首先，我们
获取
到要跟随
鼠标
移动
的
容器
，并为它添加了一个
事件
监听器，监听
鼠标
移动
事件
。在
事件
处理函数中，我们
获取
到了
鼠标
的坐标（即e.clientX和e.clientY），然后将
容器
的top和left属性设置为这些坐标值。这样就实现了
鼠标
移动
时
容器
跟随
移动
的效果。
注意：这个例子中只是给出了一个基本的思路，具体的实现方式还需要根据自己的需求进行调整。
m0_72790527:
css数学计算calc用法
林 宇 辰:
mybatis批量插入oracle/db2
心想事成All:
js 当前日期减一周 减一月 减一年
北冥有鱼 其名为:
