[danik.js]

<style>
    .bla{
        position: relative;
        height: 150px;
    }
    .half{
        width: 50%;
        height: 100%;
        position: absolute;
    }
    .left-half{
        left: 0;
    }
    .left-half:hover ~ .background{
        background: red;
    }
    .right-half{
        right: 0;
    }
    .right-half:hover ~ .background{
        background: black;
    }
    .background{
        height: 100%;
        background: blue;
    }
</style>
<div class="bla">
    <div class="half left-half"></div>
    <div class="half right-half"></div>
    <div class="background"></div>
</div>