3、考试要求: 1.给class=box的div绑定鼠标划入划出事件 2.鼠标划入时,给class=box的div改变样式 背景颜色-红色 边框-2个像素 直线 蓝色 3.鼠标划出时,给class=box的div恢复原来的颜色 边框无
时间: 2024-01-31 08:04:16 浏览: 32
好的,你的问题是如何给class=box的div绑定鼠标划入划出事件,并在鼠标划入时改变样式,在鼠标划出时恢复原来的样式?
你可以使用jQuery实现这个功能。具体步骤如下:
1. 在HTML文件中引入jQuery库:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
2. 在JavaScript文件中编写代码,给class=box的div绑定鼠标划入划出事件:
```javascript
$(document).ready(function() {
$(".box").hover(
function() {
// 鼠标划入时改变样式
$(this).css({
"background-color": "red",
"border": "2px solid blue"
});
},
function() {
// 鼠标划出时恢复原来的样式
$(this).css({
"background-color": "",
"border": ""
});
}
);
});
```
这段代码使用了jQuery的hover()方法,第一个参数是鼠标划入时执行的函数,第二个参数是鼠标划出时执行的函数。在函数中,使用$(this)来获取当前鼠标所在的元素,然后使用css()方法改变元素的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> 学生签到系统 <input type="text" v-model="student.S_id" placeholder="请输入学号"> <input type="text" v-model="student.S_pwd" placeholder="请输入密码"> 登录 班级尚未开启签到 <button @click="close">取消</button> </template> <script> import qs from "qs" import axios from "axios"; export default { name: "Login", data(){ return{ //弹窗 show:false, student:{ S_id:null, S_pwd:null, } } }, methods: { close() { this.show = false; // 隐藏弹出窗口 }, Login() { let param = qs.stringify(this.student); axios.post('/xx/students/login', param).then((response) => { //获取当前学生的班级信息并传入sessionStorage,参数为S_class sessionStorage.setItem('classInfo', response.data.data.s_class); //获取当前学生的id信息并传入sessionStorage sessionStorage.setItem('studentId', this.student.S_id); //弹窗 if (response.data.msg === "账号或密码错误"){ this.show = true; } if (response.data.code == 200) { this.$router.push({"path": "/signLog"}) } }).catch((error) => { console.log(error); }); } } } </script> <style scoped> .wrapper > h2{ text-align: center; margin: 40px 0px; } .content{ padding: 8px; } .form-item { margin-bottom: 20px; } .form-item > input{ width: 100%; height: 40px; padding: 4px; outline: none; border: 1px solid rebeccapurple; box-sizing: border-box; } .form-item > a{ display: inline-block; width: 100%; height: 40px; background-color: sandybrown; text-align: center; line-height: 40px; } .form-item > 这段代码要怎么样实现弹窗
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)