CSS实现当鼠标停留在一个元素上时,使得两个元素的样式发生改变

13 篇文章 0 订阅

这里我们实现一个鼠标停留在 input 框时,使得 inputbutton 两个元素的边框都变颜色

在这里插入图片描述

首先该元素结构如下,HTML是这样的

<div class="test">
     <input type="text" placeholder="赢手机,分一亿">
     <button>🔍</button>
</div>

第一步:当鼠标悬停在input上时,使用css伪类选择器,代码如下:

这里空格是后代选择器,:hover是伪类选择器

.test input:hover{}

第二步:当鼠标悬停在input上时,选中button元素:

html 可以看到 inputbutton 属于兄弟关系,相邻兄弟选择器符号是 +
注意:hover是加在input上的,因为是鼠标悬停在input上,而不是button

.test input:hover+button{}

第三步:用和选择器(也就是逗号)将选中的两个元素合并写上即可

完整代码如下:

.test input:hover,.test input:hover+button{
    border-color: #b0b0b0;
}
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值