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

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

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

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

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

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

.test input:hover{}

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

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

.test input:hover+button{}

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

完整代码如下：

.test input:hover,.test input:hover+button{
    border-color: #b0b0b0;
}