css实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影...
时间: 2024-03-12 15:49:48 浏览: 80
可以使用CSS的:focus-within伪类和相邻兄弟选择器来实现这个效果。具体实现步骤如下:
1. 给input和button分别添加一个父元素,例如div。
2. 使用CSS的:focus-within伪类,当input获得焦点时,设置input的父元素的box-shadow属性为阴影效果。
3. 使用相邻兄弟选择器,当input失去焦点后,再将button的父元素的box-shadow属性设置为阴影效果,同时将input的父元素的box-shadow属性设置为none,即取消阴影效果。
示例代码如下:
```html
<div class="input-container">
<input type="text">
</div>
<div class="button-container">
<button>Button</button>
</div>
```
```css
.input-container:focus-within {
box-shadow: 0 0 5px #ccc;
}
.input-container:not(:focus-within) + .button-container:focus-within {
box-shadow: 0 0 5px #ccc;
}
.input-container:not(:focus-within) {
box-shadow: none;
}
.button-container:not(:focus-within) + .input-container:focus-within {
box-shadow: 0 0 5px #ccc;
}
.button-container:not(:focus-within) {
box-shadow: none;
}
```
通过以上代码,当鼠标移到input时,input框出现阴影,移动到button时,input框的阴影消失,button框出现阴影。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.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)