悬停时更改 div 标签属性

Question

当您将鼠标悬停在不同的 div 标签上时，是否可以更改 div 标签的属性？

例如，

#tag1 {

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


#tag2 {
/* contains a link */
}

其中 tag1 经历了变化，但 tag2 包含发生悬停的位置（或链接）。

Answer 1

Here 是一个示例，说明当您使用 CSS 将鼠标悬停在单独的元素上时可以修改元素。

如您所见，它仅限于修改子元素和紧接着的兄弟元素。在前者中，当您将鼠标悬停在整个事物上时，您可以选择 div 的任何子项进行修改。在后者中，div 和 span 之间的 <br> 标签会破坏这种关系。

编辑：我还忘记了您可以选择 任何 succeeding 元素与触发悬停事件的元素共享同一父元素~ 选择器。 Here 是一个更新的小提琴，解释了这一点。在这种情况下，两者之间可能存在由悬停事件连接的元素，它们的关系不会因此而中断。在 jsfiddle 的情况下，所有元素都共享 body 元素作为它们的父元素，因此通用兄弟选择器 (~) 能够选择它们。

目前，CSS 中没有父选择器。如需进一步解释，请查看this 答案（更深入的解释，this 也不错）。

这可以使用 Javascript 来完成，但是，它甚至可以让您选择没有直接关系的其他元素（父母、孩子或相邻的兄弟姐妹）。