Question 199894 in Html Question posted in
Some basic documentation can be found here.

Html – css on hover add content to nth-of-type

I have this dropdown menu in two parts to understand it:

main-categories:

news
politics
economy
health
education

sub-categories

europe
asia
africa
oceania
North America
South America

The html (part of it), looks like this

<main-categories><a href="#void">Education</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories></main-categories>

What I need to do is:

Let´s take for example people select category Education, it is the number 5 in the list. When people is hovering the sub-categories of Education, I want to add content to the css of the Education main category like this:

main-categories:nth-of-type(5) 
sub-categories a:hover main-categories:nth-of-type(5):a 
{content:'• News • Education '}

So when people is hovering the sub-categories of Education, the word Education in main-categories (category number 5) changes to • News • Education

But it does not want to work

I have a Codepen with the full code of the dropdown menu here
https://codepen.io/familias/pen/XWygWzY

I can also add it here if you prefer but it is easy to understand the question with the posted code

Tags:

2

Answers


  1. 0

    Move the :hover selector to the main-categories element:

    main-categories:hover a:before {
  content: "▪ News ▪ ";
}

main-categories:first-child:hover a:before {
  content: "▪ Svea Times ▪ ";
}
    Login or Signup to reply.
  2. 0

    With Sibling elements you can use the following selector

    #a:hover ~ #b {
    content: "▪ the content ▪ ";
}

    But unless you refactor the html to you’ll need to get javascript involved when the elements aren’t selectable with css

    document.getElementById('a').addEventListener('hover', )( => { 
    document.getElementById('b').style.content = "▪ the content ▪" })
})

    disclaimer: just a Gist, not tested code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search