在悬停时更改Div标签属性

Question

当您将鼠标悬停在另一个div标签上时,是否可以更改div标签的属性？

例如,

#tag1 {

/* properties */
}
#tag1 a:hover {
/* new properties */
}


#tag2 {
/* contains a link */
}

其中tag1经历了更改,但tag2包含悬停发生位置的位置(或链接).

Answer 1

以下是使用CSS将鼠标悬停在单独的元素上时修改元素的示例.

正如您所看到的,它仅限于修改子元素和立即成功的兄弟姐妹.在前者中,div当您将鼠标悬停在整个事物上时,可以选择要修改的任何子项.在后者中,和<br>之间的标签就会打破关系.divspan

编辑:我也忘了你可以选择与使用选择器触发悬停事件的父级共享同一父级的任何后续元素~.这是一个更新的小提琴,解释了这一点.在这种情况下,两者之间可能存在由悬停事件连接的元素,其关系不会因此而被破坏.在jsfiddle的情况下,所有元素都将body元素作为父元素共享,因此通用兄弟选择器(~)可以选择它们.

目前,CSS中没有父选择器.有关进一步说明,请查看此答案(有关更深入的解释,这个也很好).

这可以通过Javascript完成,但是,这甚至可以让您能够选择没有直接关系的其他元素(父母,孩子或相邻的兄弟姐妹).