Basically, I'm trying to make the hover effect on a button make the background change color, but I can not find any solution on the internet, including here.
I've tried to do this with the elements like siblings , and also parent> child .
When I write
#fundo:hover + #botao {}
the color change button if I touch the button.
But when I type the reverse,
#botao:hover + #fundo {}
Nothing happens.
The + only takes the brothers in front of this element and not the previous ones. To do what you want easily, use jQuery like this:
<style>
.muda-fundo{
background-color: #000099 !important;
}
</style>
First to work jQuery just paste this link before calling the jQuery function on your page, usually it is placed in header , but whatever, it just can not be after the call:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Here's the jQuery CND link, so you do not have to download it, but if you run out of the internet, it will not work. So I recommend you drop this code into a folder in your project, usually the default is js there it looks like this:
<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>