0

Preciso fazer um hover num parágrafo e trocar a cor da tag link, como consigo fazer isso?

p:hover a {
        color:red;
    }
<a href="#">Título</a>
<p>Passar o mouse troca a cor do link acima</p>

2 Respostas 2

0

No css não existe um meio de trocar a cor do item anterior apenas trocar a cor dos itens abaixo do dentro do elemento, sugiro que você troque a ordem dos elementos para que possa usar o marcador + do css.

O marcado + selecione o proximo elemento definido após ele como no exemplo abaixo:

a:hover + p { 
  color: red;
}
<a href="">hover me</a>
<p> change color<p>

Resumo: Ao ativar o hover no elemento a, altere a cor do elemento p que vier em seguida.

Todavia você pode fazer isso com javascript/jquery usando a função prev():

$('p:hover').prev('a').css('color', 'red');
0

Nessa ordem - o elemento com hover afetar um elemento anterior não é possível, apenas um posterior. Mas como o que importa é a ordem no html, nada impede de você mudar o posicionamento visual via CSS.

p:hover + a {
        color:red;
        background-color: yellow;
    }
<p>Passar o mouse troca a cor do link acima</p>
<a href="#">Título</a>

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 .