Html 悬停时更改颜色工作不正常

我想在鼠标悬停时将图像上的灰色更改为黑色：

但其工作不正常，其工作方式如下“”，搜索输入边框未作为一个整体处理，占位符文本颜色在悬停时未更改，光标指针未出现在悬停过滤器1和过滤器2下拉列表上。你知道为什么吗

。表单组{
页边距底部：0！重要；
}
.输入组文本{
颜色：灰色；
}
.输入组文本：悬停{
颜色：黑色；
}
.过滤器{
显示：内联块；
颜色：灰色；
字体大小：粗体；
}
.i{
字号：1.1rem；
颜色：灰色；
字体大小：粗体；
}
.搜索图标{
背景色：#ffffff！重要；
边框：2件纯色灰色！重要；
右边框：1px实心透明！重要信息；
}
.搜索输入{
左边框：1px实心透明！重要信息；
边框：2倍纯色灰色；
颜色：灰色；
}
.搜索图标：悬停{
左边框：1px实心透明！重要信息；
边框：2件纯黑；
}
.搜索输入：悬停{
边框：2件纯黑；
}
.下拉切换：：之后{
显示：无；
}

使用

。下拉切换：悬停{ 颜色：黑色；}

请参阅下面的代码片段

。表单组{
页边距底部：0！重要；
}
.输入组文本{
颜色：灰色；
}
.输入组文本：悬停{
颜色：黑色；
}
.过滤器{
显示：内联块；
颜色：灰色；
字体大小：粗体；
}
.i{
字号：1.1rem；
颜色：灰色；
字体大小：粗体；
}
.搜索图标{
背景色：#ffffff！重要；
边框：2件纯色灰色！重要；
右边框：1px实心透明！重要信息；
}
.搜索输入{
左边框：1px实心透明！重要信息；
边框：2倍纯色灰色；
颜色：灰色；
}
.搜索图标：悬停{
左边框：1px实心透明！重要信息；
边框：2件纯黑；
}
.搜索输入：悬停{
边框：2件纯黑；
}
.下拉切换：：之后{
显示：无；
颜色：黑色；
}
.下拉切换：悬停{
颜色：黑色；
}
输入：悬停：：-webkit输入占位符{
颜色：黑色；
}
/*Firefox<19*/
输入：悬停：-moz占位符{
颜色：黑色；
}
输入：悬停：：-moz占位符{
颜色：黑色；
}
输入：悬停：-ms输入占位符{
颜色：黑色；
}

HTML：

谢谢，但似乎有同样的问题，搜索输入和搜索图标不被视为仅1个元素，而是2个。更新了代码段。现在包含占位符css代码。您可以了解有关这些技巧的更多信息，谢谢，但是您知道如何仅为元素“”和“”设置一个相同的边框吗？因此，当用户悬停输入类型文本时，它仅在这两个元素周围显示一个边框？因为在中，当用户将输入类型文本悬停时，它仅在输入类型文本周围显示边框，而不在图标字体范围周围显示边框，但在这两个元素周围应该有1个边框。@user10676579最简单的方法是将这两个元素放在另一个元素内，并将边框应用于该父元素。否则，你将不得不考虑每个元素的哪些边应该有边框，如果你决定添加阴影，最终结果看起来会很奇怪。