seo Question posted in
Some basic information to get you started with this can be found here.

Can you suggest me the right syntax for this? – SEO

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>
Tags:

5

Answers


  1. 0

    Just put it on the same line.

     #first-block1:hover #first-block2 {
                text-decoration:underline;
}
    Login or Signup to reply.
  2. 0 
    #first-block1 > #first-block2:hover {
    text-decoration:underline;
}
    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
  4. 0

    Depending on your HTML, it could be

    #first-block1:hover + #first-block2 {
  text-decoration: underline;
}
    Login or Signup to reply.
  5. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search