整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML 的 onmouseover 事件是网页开发人员工具箱中一个强大的工具。通过本文，你将全面掌握 onmouseover 事件的使用方法，并了解如何创建充满活力和互动的网页元素。从基本原理到高级应用，我们将探索 onmouseover 事件的各种可能性。
onmouseover 事件揭秘
onmouseover 事件在鼠标指针移动到特定元素上方时触发。这为网页开发人员提供了捕捉用户互动并相应地改变网页元素的机会。该事件通常与 onmouseout 事件搭配使用，后者在鼠标指针移出元素时触发。
基本语法
onmouseover="代码"
在这里，"代码" 是指当鼠标悬停在元素上时你希望执行的 JavaScript 代码。让我们看一个简单的例子：
<div onmouseover="alert('你好，世界！')">悬停我</div>
在这个例子中，当用户将鼠标悬停在 "悬停我" 元素上时，它会弹出一个带有 "你好，世界！" 消息的警示框。
动态效果和样式更改
onmouseover 事件真正闪光的地方在于它可以改变网页元素的样式和外观。你可以改变元素的背景颜色、边框、字体大小等。来看一个例子：
<style>
.box {
width: 100px;
height: 100px;
background-color: lightgray;
}
</style>
<div class="box" onmouseover="this.style.backgroundColor = 'red'">
将鼠标悬停于此
</div>
在这个例子中，当鼠标悬停在方块上时，它的背景颜色会变成红色。
图像效果
onmouseover 事件在图像上也很有用。你可以创建图像悬停效果，为你的网页增添视觉吸引力。来看一个例子：
<img src="image1.jpg" onmouseover="this.src='image2.jpg'">
在这个例子中，当鼠标悬停在图像上时，图像会切换为 "image2.jpg"。
菜单和下拉列表
onmouseover 事件在创建菜单和下拉列表时也很有用。你可以显示隐藏的菜单项或下拉列表，为用户提供动态的导航体验。
<div onmouseover="document.getElementById('menu').style.display = 'block'">
显示菜单
</div>
<div id="menu" style="display: none;">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
结论：释放你的创造力
onmouseover 事件为网页开发人员提供了增强用户体验和创建动态交互的机会。从简单的样式更改到复杂的菜单系统，onmouseover 事件都可以胜任。通过本文的学习，你已经掌握了 onmouseover 事件的基本原理和应用。现在，你可以利用这些知识，在你的网页设计中加入生动的元素，创造出引人入胜的用户体验！释放你的创造力，让网页更加充满活力！
当今移动设备和不同屏幕大小的设备广泛使用下，为网站设计一个能自适应不同设备的界面对于设计师和开发人员至关重要。媒体查询提供了在不同设备上动态调整 CSS 代码的能力，以确保网站在各种设备上都能提供最佳的体验。
什么是媒体查询？
媒体查询是一段代码，用于条件性地加载不同的 CSS 样式表或样式规则，以适应不同设备或屏幕大小。它们使用 @media 指令来定义一个 media 类型和条件，并在满足条件时应用不同的样式。
媒体查询语法
css
@media <media_type> ( <condition> ) {
/* 样式规则 */
}
媒体类型
* `screen`：屏幕
* `print`：打印
* `speech`：语音
条件
* `width`：屏幕宽度
* `height`：屏幕高度
* `device-width`：设备宽度
* `device-height`：设备高度
* `orientation`：设备方向（横屏或纵屏）
示例
css
@media screen and (max-width: 76 vicisster) {
.navbar {
display: none;
}
}
@media screen and (min-width: 76 vicisster) {
.navbar {
display: block;
}
}
使用媒体查询的优点
* 提高性能：**为不同的设备提供定制的样式表可以提高性能，因为只有满足条件的样式表才会被加载。
* 增强用户体验：**通过提供适合设备的界面，可以提高用户的体验。
* 提高代码可重用性：**媒体查询可以重复使用相同的样式表以适应不同的设备。
结论
媒体查询是现代网站开发中必不可少的技术，用于提供不同设备上的最佳体验。通过条件性地加载不同的样式表，可以提高性能、增强用户体验和提高代码可重用性。
emo代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>el-table动态表头</title>
<link rel="stylesheet" type="text/css" href="./lib/element-ui/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-table
:data="tableBody"
:header-cell-style="{ background: '#F3F4F7' }"
:header-row-style="{ fontWeight: 500, color: '#909399' }"
>
<el-table-column align="center" :label="tableHeadItem" v-for="(tableHeadItem, idx) in tableHead" :key="idx">
<template scope="scope">
<i class="el-icon-platform-eleme" style="font-size: 16px"></i>
{{tableBody[scope.$index][idx]}}
</template>
</el-table-column>
</el-table>
</div>
<script src="./lib/vue/vue.js"></script>
<script src="./lib/element-ui/index.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
res: [
{
NAME: "王二",
VALUE: 1,
SEX: 2,
},
{
NAME: "张三",
VALUE: 1,
SEX: 1,
},
{
NAME: "李四",
VALUE: 2,
SEX: 1,
},
],
tableBody: [],
tableHead: [],
};
},
created() {
this.tableHead = Object.keys(this.res[0]); // 表头 [ "NAME", "VALUE", "SEX" ]
this.res.forEach((item) => {
this.tableBody.push(Object.values(item)); // 表体 [ ["王二", 1, 2], ["张三", 1, 1], ["李四"， 2, 1] ]
});
},
});
</script>
</body>
</html>动态表格是生成列，也就是每一个<el-table-column>然后再根据所有列去遍历生成行，这样一个过程，知道这些，要做的就是根据这么一个过程去生成这样一个数据格式就行了。
实现动态表格的延伸：
element-ui官方推荐的CDN引入使用element的任务组件都是没有问题的，但是如果将样式和组件库代码下载下来改为本地引入，icon组件将不能使用！
CDN引入：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>请求资源：
请求的网络资源中多了一个element-icons.woff文件，原因：查看element中index.css中的icon的引入方式。
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype");
font-weight: 400;
font-display: "auto";
font-style: normal;
}解决方法：
复制字体图标资源链接下载下来，然后在element的index.css文件夹同级目录中新建fonts文件夹放入下载好的element-icons.woff和element-icons.ttf字体图标文件。
*请认真填写需求信息，我们会在24小时内与您取得联系。
