鼠标悬停按钮时，能否仅用CSS同时修改内部图标与文本样式？

完全可以实现，只需要调整CSS的选择器逻辑，利用父元素悬停触发子元素样式的规则即可，不需要修改现有HTML结构。

修改后的CSS代码： #

.icon-button:hover {        
    color: cornflowerblue;  /* 文本继承按钮的color属性，实现变色 */   
}

.icon-button:hover .svg_icon {    
    filter: sepia(100%) hue-rotate(190deg) saturate(500%);  /* 按钮悬停时触发图标滤镜 */
}

原理说明： #

• 按钮的color属性会被内部的文本div继承，所以当.icon-button:hover时设置color，就能让下方的"Connect"文本从灰色变为蓝色。
• 把原来的.svg_icon:hover改成.icon-button:hover .svg_icon，意味着只要鼠标悬停在整个按钮区域（不管是图标还是文本部分），就会给图标应用滤镜效果，同时不会影响按钮背景或其他元素。

你的HTML代码不需要做任何改动，保持原样即可。

内容的提问来源于stack exchange，提问作者Mdarende