css:hover状态改变另一个元素样式的使用

例如有如下dom结构：

       

            

            按钮

            

    
        

下面分析hover的作用方法：

1、改变本身样式

       #buttonOnMap:hover {
            background-color: rgba(43, 143, 243, 0.63);
        }

2、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...}这种方式定义CSS样式来控制

       #mapDiv:hover #buttonOnMap{
            background-color: rgba(43, 143, 243, 0.63);
        }

3、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式；

        #buttonFlag:hover + #buttonOnMap{
            background-color: rgba(43, 143, 243, 0.63);
        }