Can you suggest me the right syntax for this?

Question

What I am trying is, when the mouse is over the link of #first-block1, the link of #first-block2 should get underline. Only through CSS not javascript.

#first-block1:hover {
  #first-block2 {
    text-decoration: underline;
  }
}

<p><a id="first-block1" href=""><span style="color:black;">yoast.com</span> <span style="color:#515A5A">> SEO blog > SEO Basics</span></a><br><a id="first-block2" href="">Elements of Google Search Engine Results Page. SEO for ...</a></p>

The only thing you are going to get are guesses until you post the HTML structure. — Heretic Monkey, Jun 26 '20 at 18:07

score 1 · Answer 1 · answered Jun 26 '20 at 18:35

You need to use the ~ sibling selector instead of the more direct + next element selector since you have a <br> tag between your <a> tags. (More on selectors: https://www.w3schools.com/cssref/css_selectors.asp).

Also, you can't nest classes/ids, unless you are using a preprocessor like SASS/SCSS/LESS.

a {
  text-decoration: none;
}

#first-block1:hover ~ #first-block2 {
  text-decoration: underline;
}

<p><a id="first-block1" href=""><span style="color:black;">yoast.com</span> <span style="color:#515A5A">> SEO blog > SEO Basics</span></a><br><a id="first-block2" href="">Elements of Google Search Engine Results Page. SEO for ...</a></p>

Thank you!!!! this worked!!! and also got know about selectors. — fzn619, Jun 26 '20 at 19:38
@fzn619 glad you got it figured out! You should go give an upvote to the duplicate answer. — disinfor, Jun 26 '20 at 19:46

score 0 · Answer 2 · answered Jun 26 '20 at 18:16

0

Depending on your HTML, it could be

#first-block1:hover + #first-block2 {
  text-decoration: underline;
}

answered Jun 26 '20 at 18:16

David Callanan

5,601
7
63
105

score -1 · Answer 3 · answered Jun 26 '20 at 18:05

-1

Just put it on the same line.

 #first-block1:hover #first-block2 {
                text-decoration:underline;
}

answered Jun 26 '20 at 18:05

Adam Baird

167
5

score -1 · Answer 4 · answered Jun 26 '20 at 18:09

-1

#first-block1 > #first-block2:hover {
    text-decoration:underline;
}

answered Jun 26 '20 at 18:09

Will

33
2

Hamza Sabir · Answer 5 · 2020-06-27T09:55:44.013

-2

Here what I has to do if I was in charge of it:

<p><a id="first-block1" href=""><span style="color:black;">yoast.com</span> <span style="color:#515A5A">> SEO blog > SEO Basics</span></a><br><a class="first-block2" style="text-decoration: none;" href="">Elements of Google Search Engine Results Page. SEO for ...</a></p>

#first-block1:hover ~ a { 
    text-decoration: underline !IMPORTANT;
}

edited Jun 27 '20 at 09:55

answered Jun 26 '20 at 18:11

Hamza Sabir

63
7

You just copied the CSS from the question and pasted it into an answer... – David Callanan Jun 26 '20 at 18:17
1

I copied the wrong answer, but now it's working fine, thanks! – Hamza Sabir Jun 27 '20 at 09:57

Can you suggest me the right syntax for this?

5 Answers5