O +
só pega os irmãos a frente desse elemento e não os anteriores. Para fazer o que você quer facilmente, use jQuery assim:
<style>
.muda-fundo{
background-color: #000099 !important;
}
</style>
Primeiro para funcionar o jQuery é só colar este link antes da chamada da função jQuery na sua página, normalmente coloca-se no header
, mas tanto faz, só não pode ser depois da chamada:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Aqui te passei o link do CND do jQuery, para que você não precise baixá-lo, porém se você ficar sem internet, não vai funcionar. Então recomendo que você baixe esse código em uma pasta no seu projeto, normalmente o padrão é js aí fica assim:
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#botao').hover(function(){
$('#fundo').toggleClass('muda-fundo');
});
});
</script>