css hover同级,CSS hover改变子标签/同级标签样式

.second {

display: none;

}

.first:hover+.second, .second:hover {

display: block;

}

/*第一个div hover时，改变其子标签的颜色*/

.first:hover .first-child {

color: cyan;

}

/*第一个div hover时，改变第二个div标签的颜色*/

.first:hover + .second {

color: red;

}

/*第一个div hover时，改变第二个div的子标签的颜色*/

.first:hover + .second>.second-child {

color: blue;

}

/*第一个div hover时，改变第三个div标签的颜色---非紧邻元素，无效*/

.first:hover + .third {

color: cyan;

}

/*第三个div hover时，改变第二个div标签的颜色---对上一个紧邻元素，无效*/

.third:hover + .second {

color:red;

}

/* ‘+’ 用于同级选择 */

/* ‘>’ 或 ‘ ’ 用于后代选择 */

/*>或空格均可用于子代选择*/

第一个div标签

第一个div标签的子标签

第二个div标签:(第一个div标签的同级标签)

第二个div标签的 子元素

第三个div标签

经以上代码测试，在一个div 标签处于 hover状态时，可以顺利的改变同级的下一个标签的样式，但是对于同级的上一个标签的样式，没有任何改变。

各位大神，谁有解决方法，请赐教！