:hover的使用,即当鼠标指针移入元素时,所做出的样式设置
示例一
demo01
以上情况存在于当鼠标指针移入元素,通过:hover使该元素自身改变新的样式
示例二
demo01
以上示例中,当存在父子关系的时候,可以通过父级的:hover使得子级的样式发生改变,写法为 .container:hover .content,hover后面有一个空格;但是,子级:hover改变不了父级的样式
示例三
demo01
以上示例,当两个元素不是父子关系,为同胞兄弟关系时,则通过 .container:hover .content这样的写法是无效的,则需要通过“+”号,即 .container:hover +.content才能显示出效果;但是要注意两个元素的先后顺序哦~










