Problem with Hover in p button/ change background color

Asked

Viewed 1,047 times

0

Basically, I’m trying to make the Hover effect on a button make the background change color, but I can’t find any solution on the internet, including here.

I’ve tried that with elements like brothers, and also father>son.

When I write

#fundo:hover + #botao {}

the color change button if I touch the button.

But when I write the reverse, 

#botao:hover + #fundo {}

nothing happens.

css hover

  • Background of which element should change color when having Hover on the button? That wasn’t clear.

  • There are two elements, the background and the button. By hovering the mouse over the button, I want the background (could be a div) to change to the color I specify.

  • With the elements being siblings you can even do it with just CSS, but with the button inside the div, No. What would that be div?

2 answers

0

The + just get the brothers in front of that 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 the call of the jQuery function on your page, usually puts itself in the header, but whatever, it just can’t be after the call:

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Here I gave you the jQuery CND link, so you don’t have to download it, but if you run out of internet, it won’t work. So I recommend that you download this code into a folder in your project, usually the default is js then it gets 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>

  • Thank you Luiz! I’m not familiar with JS yet, but I will try to fit this code there haha You can explain why it works in the background order > button, but not button > background?

  • From what I saw, css only "sees" forward. Already javascript or Jquery "runs" freely by DOM. I will update the answer to you just paste the correct code and work the jquery, place my answer if it works, blz.

  • I’m sorry, Luiz, but I couldn’t, and I don’t know if I got it right. The first code you posted, the <style>, I put in the file .css. The second code, I put at the same time as the third? or is the third (the final two scripts) a substitute for the second? Outside the <style>, I put the codes inside the head and changed the names to fit the project, but I don’t know if I should put something in the "Function()".

  • In addition, inserting the script into the head shifted the entire layout down, about 40px.

  • 1°- Do you know that in your css file, you should not write <style>, only what is inside it correct? 2º- the second code you will use it if you do not want to download the jquery file on your computer. Either Voce uses it, or uses the first line of the third code, note that it has <script src'> the src indicates that you are searching for the file elsewhere.

  • Here’s an excellent explanation. http://tableless.github.io/beginnertes/manual/js/inserindo-js.html and on the same site http://tableless.github.io/beginnertes/manual/js/o-que-jquery.html

Show 1 more comment

0

more than using javascript?

it’s simple to see:

.mouse:hover{background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
 border-color:#16B83E !important; text-decoration:none !important; color:blue !important;}
<html>
<head>
<!------ button hover linear | MacedoMontalvao--->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

<div class="text-justify">
<!-------------------------- start ---->

<button type="button" class="btn btn-primary mouse"><a href="#not-and-link" class="text-white">seu texto aqui</a></button>

<!--------------------------- finish --->
</div>

</body>
</html>

Remembering that the ! Important should be avoided, here it is in use by bootstrap account.

Browser other questions tagged css hover

You are not signed in. Login or sign up in order to post.