jquery实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影...
时间: 2023-12-01 21:20:47 浏览: 53
可以使用jQuery的事件绑定和CSS方法来实现这个效果。具体实现步骤如下:
1. 给input和button分别添加一个父元素,例如div。
2. 使用jQuery的mouseenter事件和CSS方法,当鼠标移到input时,设置input的父元素的box-shadow属性为阴影效果。
3. 使用jQuery的mouseleave事件和CSS方法,当鼠标移出input时,将input的父元素的box-shadow属性设置为none,即取消阴影效果。
4. 使用jQuery的mouseenter事件和CSS方法,当鼠标移到button时,设置button的父元素的box-shadow属性为阴影效果。
5. 使用jQuery的mouseleave事件和CSS方法,当鼠标移出button时,将button的父元素的box-shadow属性设置为none,即取消阴影效果。
示例代码如下:
```html
<div class="input-container">
<input type="text">
</div>
<div class="button-container">
<button>Button</button>
</div>
```
```javascript
$(function() {
// 鼠标移到input时设置阴影效果
$(".input-container").mouseenter(function() {
$(this).css("box-shadow", "0 0 5px #ccc");
});
// 鼠标移出input时取消阴影效果
$(".input-container").mouseleave(function() {
$(this).css("box-shadow", "none");
});
// 鼠标移到button时设置阴影效果
$(".button-container").mouseenter(function() {
$(this).css("box-shadow", "0 0 5px #ccc");
});
// 鼠标移出button时取消阴影效果
$(".button-container").mouseleave(function() {
$(this).css("box-shadow", "none");
});
});
```
通过以上代码,当鼠标移到input时,input框出现阴影,移动到button时,input框的阴影消失,button框出现阴影。
相关推荐
![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)
![](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)