make multiple elements hover

Question

I have three a tags inside a div all with hrefs

.title {
    text-decoration: none !important;
    color: #000000;        
}

.title:hover{
    color: #f20d20;
}

<div>
    <a class="title" href="google.com">title 1</a>   
    <a class="title" href="google.com">title 2</a>
    <a class="title" href="google.com">title 3</a>  
</div>

I would like it so that if the user hovers over one element all of them change hover color. Im sure this is a simple problem but i cant get it to work.

score 3 · Answer 1 · edited Oct 12 '21 at 02:47

3

Add Hover to the parent and color to the items:

div:hover title {
  color: #f20d20;
}

edited Oct 12 '21 at 02:47

J. Scott Elblein

4,013
15
58
94

answered Oct 12 '21 at 02:45

Zakis Raj

31
2

1

How about if titles have margins? – Sato Takeru Oct 12 '21 at 09:15

score 2 · Answer 2 · answered Oct 12 '21 at 02:43

2

You can use div:hover

You cannot select all siblings of an element. You can select titles followed by the hover title with .title ~ .title but for previous titles no way in css.

answered Oct 12 '21 at 02:43

mrash

883
7
18

Yudiz Solutions · Answer 3 · 2021-10-12T08:58:04.990

Can you please check the below code? Hope it will work for you. Here I have added display:inline-block property to the parent div so that it does not cover the entire block on hover. Also added hover to the parent div and color to the links.

div {
   display:inline-block;
}

.title {
    text-decoration: none !important;
    color: #000000;  
}

div:hover a{
    color: #f20d20;
}

<div>
    <a class="title" href="google.com">title 1</a>   
    <a class="title" href="google.com">title 2</a>
    <a class="title" href="google.com">title 3</a>  
</div>

make multiple elements hover

3 Answers3