:hover选择器控制另一个元素

情景一:控制兄弟元素 方法:

:hover+

【:hover选择器控制另一个元素】*只能顺序为下一位的兄弟级元素,例如
你们好 你好啊 你也好啊.one,.two,.three{ width: 200px; height: 200px; border: 1px solid black; } .one:hover+.two{ background-color: yellow; color: green; }/* 有效 */ .one:hover+.three{ background-color: yellow; color: green; }/* 无效 */ .two:hover+.one{ background-color: yellow; color: green; }/* 无效 */

情景二:控制子元素
.parent:hover .child{ background-color:red; }

情景三:控制兄弟元素的子元素
.first:hover+.secand .son{ background-color: blueviolet; }

    推荐阅读