Hover one element and capture another tag

Asked

Viewed 451 times

0

I need to do an Hover in a paragraph and change the color of the link tag, how can I do this?

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

css

2 answers

0


In css there is no way to change the color of the previous item just change the color of the items abaixo of dentro element, I suggest you change the order of the elements so you can use the marker + of css.

The marked + select the next element defined after it as in the example below:

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

Summary: When activating hover in the element a, change the color of the element p who comes next.

Yet you can do this with javascript/jquery using the function prev():

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

0

In that order - the element with hover affect an earlier element is not possible, only a later one. But since what matters is the order in html, nothing prevents you from changing the visual placement 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>

Browser other questions tagged css

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