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

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

    1. //当页面加载完成后执行后面的匿名函数
    2. window.onload = function () {
    3.     //get:获取     Element:元素    By:通过...方式
    4.     //getElementById()根据id值获取某元素
    5.     let fruitTbl = document.getElementById("fruit_tbl");
    6.     //table.rows:获取这个表格的所有的行，返回数组
    7.     let rows = fruitTbl.rows;
    8.     //从 1 开始，因为 第 0 行是表头，不需要绑定事件
    9.     for (let i = 1; i < rows.length; i++) {
    10.         let tr = rows[i];
    11.         //事件动态绑定
    12.         tr.onmouseover = showBGColor;
    13.         tr.onmouseout = clearBGColor;
    14.  
    15.         //cell:单元格、细胞
    16.         //获取这一行的所有的单元格
    17.         let tds = tr.cells;
    18.         let priceTD = tds[2];
    19.         priceTD.onmouseover = showHand;
    20.     }
    21. };
    22. function showHand() {
    23.     let priceTD = event.srcElement;
    24.     //cursor光标
    25.     priceTD.style.cursor = "pointer";
    26. }
    27. function showBGColor() {
    28.     //window.event表示当前发生的事件 ”window.“可以省略
    29.     // console.log(window.event);
    30.     // alert(window.event);
    31.     let obj = window.event.srcElement;
    32.     //alert(obj);
    33.     //console.log(obj);   //发现obj是td，而不是tr。事件传递现象
    34.     let td=obj;
    35.     //parentElement:父元素   td的父元素是tr。tr有很多td子元素
    36.     let tr = td.parentElement;
    37.     tr.style.backgroundColor = "purple";
    38. }
    39.     function clearBGColor() {
    40.     let td = window.event.srcElement;
    41.     let tr = td.parentElement;
    42.     tr.style.backgroundColor = "transparent";
    43. }

    2、fruit.html

    1. html>
    2. <html lang="zh_CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>js-DOM/BOM实战title>
    8.     <link href="style/fruit.css" rel="stylesheet">link>
    9.     <script src="js/鼠标悬浮和离开事件.js">script>
    10. head>
    11. <body>
    12.     <div id="div0">
    13.         <div id="div_title">欢迎使用水果库存系统div>
    14.         <div id="div2">
    15.             <table id="fruit_tbl">
    16.                 <tr>
    17.                     <th class="w10"><input type="checkbox" />th>
    18.                     <th class="w20">名称th>
    19.                     <th class="w20">单价th>
    20.                     <th class="w20">数量th>
    21.                     <th class="w20">小计th>
    22.                     <th class="w10">操作th>
    23.                 tr>
    24.                 
    25.                 
    26.                 <tr>
    27.                     <td><input type="checkbox" />td>
    28.                     <td>苹果td>
    29.                     <td>5td>
    30.                     <td>2td>
    31.                     <td>10td>
    32.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    33.                 tr>
    34.                 <tr>
    35.                     <td><input type="checkbox" />td>
    36.                     <td>菠萝td>
    37.                     <td>3td>
    38.                     <td>5td>
    39.                     <td>15td>
    40.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    41.                 tr>
    42.                 <tr>
    43.                     <td><input type="checkbox" />td>
    44.                     <td>哈密瓜td>
    45.                     <td>4td>
    46.                     <td>5td>
    47.                     <td>20td>
    48.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    49.                 tr>
    50.                 <tr>
    51.                     <td><input type="checkbox" />td>
    52.                     <td>葡萄td>
    53.                     <td>10td>
    54.                     <td>5td>
    55.                     <td>50td>
    56.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    57.                 tr>
    58.                 <tr>
    59.                     <td><input type="checkbox" />td>
    60.                     <td>青梅td>
    61.                     <td>10td>
    62.                     <td>5td>
    63.                     <td>50td>
    64.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    65.                 tr>
    66.                 <tr>
    67.                     <td><input type="checkbox" />td>
    68.                     <td>人参果td>
    69.                     <td>10td>
    70.                     <td>5td>
    71.                     <td>50td>
    72.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    73.                 tr>
    74.                 <tr>
    75.                     <td><input type="checkbox" />td>
    76.                     <td>菠萝蜜td>td>
    77.                     <td>10td>
    78.                     <td>5td>
    79.                     <td>50td>
    80.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    81.                 tr>
    82.                 <tr>
    83.                     <td><input type="checkbox" />td>
    84.                     <td>西红柿td>
    85.                     <td>10td>
    86.                     <td>5td>
    87.                     <td>50td>
    88.                     <td><img src='imgs/del.png' class="delBtn"/>td>
    89.                 tr>
    90.             table>
    91.         div>
    92.     div>
    93. body>
    94. html>

    3、fruit.css

    1. *{
    2.     color:rgb(3, 31, 2);
    3.     font-weight: lighter;
    4. }
    5. body{
    6.     padding:0;
    7.     margin:0;
    8.     background-color: rgb(3, 31, 2);
    9. }
    10. #div0{
    11.     width:80%;
    12.     border:0px solid red;
    13.     background-color: rgb(209, 230, 235);
    14.     margin-left:10%;
    15.     padding-top:48px;
    16.     padding-bottom:48px;
    17.     margin-top:8px;
    18. }
    19. #div_title{
    20.     width:80%;
    21.     margin-left:10%;
    22.     text-align: center;
    23.     font-size:24px;
    24.     letter-spacing: 4px;
    25.     margin-bottom:16px;
    26. }
    27. #div2{
    28.     margin-left:10%;
    29.     border:0px solid red;
    30.     width:80%;
    31. }
    32. .delBtn{
    33.     width:16px;
    34.     height:16px;
    35. }
    36. #fruit_tbl , #fruit_tbl td, #fruit_tbl th {
    37.     border:1px solid lightgray;
    38.     text-align: center;
    39. }
    40. #fruit_tbl{
    41.     width:100%;
    42.     line-height: 32px;
    43.     border-collapse: collapse;
    44. }
    45. .w10{
    46.     width:10%;
    47. }
    48. .w15{
    49.     width:15%;
    50. }
    51. .w20{
    52.     width:20%;
    53. }

     

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

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

    1. // 获取要设置手势的元素
    2. var element = document.getElementById("myElement");
    3.  
    4. // 设置鼠标悬浮时的手势样式
    5. element.addEventListener("mouseover", function() {
    6.   element.style.cursor = "grab";
    7. });
    8.  
    9. // 设置鼠标移开时的手势样式
    10. element.addEventListener("mouseout", function() {
    11.   element.style.cursor = "default";
    12. });

    上述代码中，我们首先获取要设置手势的元素，使用 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伪类选择器，可以定义元素在鼠标悬浮时的样式。

    下面是一个示例代码：

    1. // 选择元素
    2. const elem = document.querySelector('.my-element');
    3.  
    4. // 添加事件监听器
    5. elem.addEventListener('mouseover', () => {
    6.   // 更改元素样式
    7.   elem.style.cursor = 'pointer';
    8. });
    9.  
    10. elem.addEventListener('mouseout', () => {
    11.   // 恢复元素样式
    12.   elem.style.cursor = 'auto';
    13. });

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

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

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

  • 相关阅读:
    【node进阶】在node.js中优雅的使用Socket.IO模块
    ESP-IDF工程自定义组件
    仿Mac程序坞放大动画
    FFmpeg抓取RTSP图像进行图像分析
    Linux驱动基础
    LSTM长短时记忆网络：推导与实现（pytorch）
    Qt4升级到Qt5中文乱码问题的解决
    有段CAN通信中的FIFO代码不理解
    数据库事务中“锁”的分类
    Vue3+TS+Node打造个人博客（前端架构）
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134427305