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>
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');
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>