elementPlus的<Close style="width: 0.8em; height: 0.8em; margin-right: 2px;margin-bottom: 4px" />,怎么添加鼠标覆盖颜色变浅
时间: 2024-02-19 22:03:48 浏览: 5
你可以使用CSS中的:hover伪类来实现鼠标覆盖时改变颜色的效果。具体可以通过下面的代码来实现:
```
.Close:hover {
opacity: 0.5; // 改变透明度,使颜色变浅
cursor: pointer; // 鼠标变为手形
}
```
你可以将以上代码添加到你的CSS文件中,或者使用<style>标签将其嵌入到HTML文件中。希望这可以帮助到你。
相关问题
<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-checkId">已通过</div></td><td field="button"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-button"><a href="#" style="color: red" onclick="fileManager(0)">图片管理</a></div></td><td field="truckNo"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-truckNo">辽PD6885</div></td><td field="truckCardColor"><div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-truckCardColor">黄牌</div></td><td field="vtNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-vtNam">秦皇岛九福物流有限公司</div></td><td field="driverNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-driverNam">叶红建</div></td><td field="linkTel"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-linkTel">13842929049</div></td><td field="workCompanyCod"><div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-workCompanyCod">金海粮油</div></td><td field="cargoNam" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-cargoNam"></div></td><td field="consignCod" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-consignCod"></div></td><td field="planDte"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-planDte">2023-05-01</div></td><td field="validTyp"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-validTyp">当天有效</div></td><td field="ifEnd"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-ifEnd">x</div></td><td field="individualId" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-individualId">0</div></td><td field="rejectReason"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-rejectReason"></div></td><td field="checkNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-checkNam">jhly</div></td><td field="checkTim"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-checkTim">2023-04-29 21:09</div></td>以上代码为网页源码,帮我写一段python程序从以上代码中找出drivernam和checkTim并保存数据库中
可以使用BeautifulSoup和pymysql库来实现该功能。以下是示例代码:
``` python
from bs4 import BeautifulSoup
import pymysql
# 解析网页源码
html = """
<div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-checkId">已通过</div></td><td field="button"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-button"><a href="#" style="color: red" onclick="fileManager(0)">图片管理</a></div></td><td field="truckNo"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-truckNo">辽PD6885</div></td><td field="truckCardColor"><div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-truckCardColor">黄牌</div></td><td field="vtNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-vtNam">秦皇岛九福物流有限公司</div></td><td field="driverNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-driverNam">叶红建</div></td><td field="linkTel"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-linkTel">13842929049</div></td><td field="workCompanyCod"><div style=";text-align:center;;height:auto;" class="datagrid-cell datagrid-cell-c1-workCompanyCod">金海粮油</div></td><td field="cargoNam" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-cargoNam"></div></td><td field="consignCod" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-consignCod"></div></td><td field="planDte"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-planDte">2023-05-01</div></td><td field="validTyp"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-validTyp">当天有效</div></td><td field="ifEnd"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-ifEnd">x</div></td><td field="individualId" style="display:none;"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-individualId">0</div></td><td field="rejectReason"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-rejectReason"></div></td><td field="checkNam"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-checkNam">jhly</div></td><td field="checkTim"><div style=";height:auto;" class="datagrid-cell datagrid-cell-c1-checkTim">2023-04-29 21:09</div></td>
"""
soup = BeautifulSoup(html, 'html.parser')
# 获取driverNam和checkTim的值
driverNam = soup.find('td', {'field': 'driverNam'}).text.strip()
checkTim = soup.find('td', {'field': 'checkTim'}).text.strip()
# 将数据保存到数据库中
conn = pymysql.connect(host='localhost', user='root', password='password', database='test')
cur = conn.cursor()
sql = "INSERT INTO table_name (driverNam, checkTim) VALUES (%s, %s)"
values = (driverNam, checkTim)
cur.execute(sql, values)
conn.commit()
cur.close()
conn.close()
```
需要将代码中的`table_name`替换为实际表名,以及修改数据库连接参数。
<el-row style="width: 100%"> <el-col :span="1"> <el-dialog :title="dialogTitle" v-model="dialogVisible" :width="600" :fullscreen="fullVisible" :close-on-click-modal="false" destroy-on-close > <span style="float: right; margin-right: 40px; margin-top: -35px"> <i v-if="fullVisible" @click="fullVisible=false;height='70vh'" class="el-icon-copy-document"></i> <i v-else @click="fullVisible=true;height='100%'" class="el-icon-full-screen"></i> </span> <iframe :src="dialogSrc" style="width: 100%; border: 0;" :style="{ height: height }"></iframe> </el-dialog> </el-col> </el-row>
这段代码是一个使用 Element UI 框架的对话框组件,包含了一个标题、一个可变宽度的对话框、一个全屏按钮和一个嵌入的 iframe 元素。其中,`el-row` 和 `el-col` 是 Element UI 中的栅格系统,用于布局。`el-dialog` 是对话框组件,通过设置相关属性来控制对话框的行为和样式。`el-icon-copy-document` 和 `el-icon-full-screen` 是 Element UI 中的图标组件,用于显示复制和全屏图标。`iframe` 是一个 HTML 元素,用于在网页中嵌入另一个网页。代码中使用了动态绑定来设置对话框的高度和 iframe 的高度。