JS-项目实战-鼠标悬浮变手势（鼠标放单价上生效）

1、鼠标悬浮和离开事件.js

//当页面加载完成后执行后面的匿名函数
window.onload = function () {
    //get:获取     Element:元素    By:通过...方式
    //getElementById()根据id值获取某元素
    let fruitTbl = document.getElementById("fruit_tbl");
    //table.rows:获取这个表格的所有的行，返回数组
    let rows = fruitTbl.rows;
    //从 1 开始，因为 第 0 行是表头，不需要绑定事件
    for (let i = 1; i < rows.length; i++) {
        let tr = rows[i];
        //事件动态绑定
        tr.onmouseover = showBGColor;
        tr.onmouseout = clearBGColor;

        //cell:单元格、细胞
        //获取这一行的所有的单元格
        let tds = tr.cells;
        let priceTD = tds[2];
        priceTD.onmouseover = showHand;
    }
};
function showHand() {
    let priceTD = event.srcElement;
    //cursor光标
    priceTD.style.cursor = "pointer";
}
function showBGColor() {
    //window.event表示当前发生的事件 ”window.“可以省略
    // console.log(window.event);
    // alert(window.event);
    let obj = window.event.srcElement;
    //alert(obj);
    //console.log(obj);   //发现obj是td，而不是tr。事件传递现象
    let td=obj;
    //parentElement:父元素   td的父元素是tr。tr有很多td子元素
    let tr = td.parentElement;
    tr.style.backgroundColor = "purple";
}
    function clearBGColor() {
    let td = window.event.srcElement;
    let tr = td.parentElement;
    tr.style.backgroundColor = "transparent";
}

2、fruit.html

    
    
    
    
    
    


    

        
欢迎使用水果库存系统
        

            

                

                    

                    
名称
                    
单价
                    
数量
                    
小计
                    
操作
                
                
                
                

                    

                    
苹果
                    
5
                    
2
                    
10
                    

                
                

                    

                    
菠萝
                    
3
                    
5
                    
15
                    

                
                

                    

                    
哈密瓜
                    
4
                    
5
                    
20
                    

                
                

                    

                    
葡萄
                    
10
                    
5
                    
50
                    

                
                

                    

                    
青梅
                    
10
                    
5
                    
50
                    

                
                

                    

                    
人参果
                    
10
                    
5
                    
50
                    

                
                

                    

                    
菠萝蜜
                    
10
                    
5
                    
50
                    

                
                

                    

                    
西红柿
                    
10
                    
5
                    
50
                    

                
            
        
    

3、fruit.css

*{
    color:rgb(3, 31, 2);
    font-weight: lighter;
}
body{
    padding:0;
    margin:0;
    background-color: rgb(3, 31, 2);
}
#div0{
    width:80%;
    border:0px solid red;
    background-color: rgb(209, 230, 235);
    margin-left:10%;
    padding-top:48px;
    padding-bottom:48px;
    margin-top:8px;
}
#div_title{
    width:80%;
    margin-left:10%;
    text-align: center;
    font-size:24px;
    letter-spacing: 4px;
    margin-bottom:16px;
}
#div2{
    margin-left:10%;
    border:0px solid red;
    width:80%;
}
.delBtn{
    width:16px;
    height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {
    border:1px solid lightgray;
    text-align: center;
}
#fruit_tbl{
    width:100%;
    line-height: 32px;
    border-collapse: collapse;
}
.w10{
    width:10%;
}
.w15{
    width:15%;
}
.w20{
    width:20%;
}

 

在JS中实现鼠标悬浮变手势，可以使用鼠标事件和CSS样式来实现。

以下是一个实现鼠标悬浮变手势的JS代码示例：

// 获取要设置手势的元素
var element = document.getElementById("myElement");

// 设置鼠标悬浮时的手势样式
element.addEventListener("mouseover", function() {
  element.style.cursor = "grab";
});

// 设置鼠标移开时的手势样式
element.addEventListener("mouseout", function() {
  element.style.cursor = "default";
});

上述代码中，我们首先获取要设置手势的元素，使用 addEventListener 方法来监听鼠标事件。当鼠标悬浮在元素上时，我们将设置CSS样式来改变鼠标的手势样式为 grab，当鼠标离开元素时，我们将改变鼠标的手势样式为 default。

您可以根据需要，将 grab 或 default 替换为您所需要的手势样式，以实现您想要的效果。

要在JavaScript中实现鼠标悬浮变手势，您需要使用鼠标事件和CSS样式来实现。以下是一些基本的步骤：

1. 选择要应用鼠标悬浮手势的元素。可以使用document.querySelector或document.querySelectorAll方法选择元素。

2. 添加mouseover和mouseout事件监听器。当鼠标进入元素时，mouseover事件将被触发，当鼠标离开元素时，mouseout事件将被触发。

3. 在事件监听器中添加代码，以更改元素的CSS样式，以表示鼠标悬浮手势。可以使用元素的style属性，或者添加/删除CSS类来更改样式。

4. 使用CSS样式来定义鼠标悬浮手势。使用:hover伪类选择器，可以定义元素在鼠标悬浮时的样式。

下面是一个示例代码：

// 选择元素
const elem = document.querySelector('.my-element');

// 添加事件监听器
elem.addEventListener('mouseover', () => {
  // 更改元素样式
  elem.style.cursor = 'pointer';
});

elem.addEventListener('mouseout', () => {
  // 恢复元素样式
  elem.style.cursor = 'auto';
});

在CSS中，您可以使用以下代码来定义鼠标悬浮手势：

.my-element:hover {
  /* 定义样式 */
  cursor: pointer;
}

这将在鼠标悬浮在元素上时将光标更改为指针。