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

例如有如下dom结构：

        <div id="mapDiv" class="hescgis_map">
            <div id=buttonDiv><span id="buttonFlag" ></span>
            <button id="buttonOnMap" >按钮</button></div>
            <div id="location"></div>    
        </div>

下面分析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);
        }