-1

Basicamente, estou tentando fazer com que o efeito hover em um botão faça o fundo mudar de cor, mas não encontro nenhuma solução na internet, incluindo aqui.

Já tentei fazer isso com os elementos como irmãos, e também pai>filho.

Quando eu escrevo

#fundo:hover + #botao {}

o botão troca de cor se eu toco no botão.

Mas quando escrevo o inverso,

#botao:hover + #fundo {}

nada acontece.

3
  • Fundo de qual elemento deve trocar de cor ao ter hover no botão? Isso não ficou claro.
    – Woss
    Commented 12/09/2017 às 0:26
  • São dois elementos, o fundo e o botão. Passando o mouse sobre o botão, quero que o fundo (poderia ser um div) mude para a cor que eu especificar. Commented 12/09/2017 às 0:35
  • Com os elementos sendo irmãos você até consegue com apenas CSS, mas com o botão dentro da div, não. O que seria essa div?
    – Woss
    Commented 12/09/2017 às 0:38

2 Respostas 2

0

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>
6
  • Obrigado Luiz! Não sou familiarizado com JS ainda, mas tentarei encaixar esse código lá haha Você sabe explicar por que funciona na ordem fundo > botão, mas não botão > fundo? Commented 12/09/2017 às 0:38
  • Pelo que vi, o css só "enxerga" pra frente. Já o javascript ou JQuery "corre" livremente pelo DOM. Vou atualizar a resposta pra você só colar o código correto e funcionar o jquery, positive ai minha resposta se der certo, blz.
    – Luiz
    Commented 12/09/2017 às 0:50
  • Desculpe, Luiz, mas não consegui e nem sei se entendi direito. O primeiro código que postou, o <style>, eu coloquei no arquivo .css. O segundo código, eu coloco ao mesmo tempo que o terceiro? ou o terceiro (os dois scripts finais) é um substituto para o segundo? Fora o <style>, coloquei os códigos dentro do head e troquei os nomes para adequar ao projeto, mas não sei se devo colocar alguma coisa no "function()". Commented 12/09/2017 às 2:05
  • Além disso, inserir o script no head deslocou todo o layout para baixo, cerca de 40px. Commented 12/09/2017 às 2:06
  • 1°- Você sabe que no seu arquivo css, não deve escrever o <style>, só o que está dentro dele correto? 2º- o segundo codigo você vai usar ele se não quiser baixar o arquivo do jquery no seu computador. Ou voce usa ele, ou usa a primeira linha do terceiro codigo, Note que tem <script src'> o src indica que está buscando o arquivo em outro lugar.
    – Luiz
    Commented 12/09/2017 às 12:55
0

mais para que usar javascript?

é simples veja:

.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>

Lembrando que o !important deve ser evitado, aqui esta em uso por conta do bootstrap.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .