Css при наведении добавить контент в nth-of-type
У меня есть это выпадающее меню в двух частях, чтобы понять это:
основные категории:
news
politics
economy
health
education
подкатегории
europe
asia
africa
oceania
North America
South America
HTML (часть его) выглядит так
<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>
Что мне нужно сделать, это:
Возьмем, к примеру, людей, выбравших категорию «Образование», это номер 5 в списке. Когда люди наводят курсор на подкатегории «Образование», я хочу добавить контент в CSS основной категории «Образование» следующим образом:
main-categories:nth-of-type(5)
sub-categories a:hover main-categories:nth-of-type(5):a
{content:'• News • Education '}
Поэтому, когда люди наводят курсор на подкатегории «Образование», слово «Образование» в основных категориях (номер категории 5) меняется на • Новости • Образование.
Но работать не хочет
У меня есть Codepen с полным кодом выпадающего меню здесь https://codepen.io/familias/pen/XWygWzY
Я также могу добавить его сюда, если хотите, но вопрос легко понять с помощью размещенного кода.
Почему вы используете недопустимый HTML? <main-categories> и <sub-categories> не существуют, но <div>, <ul> и <li> допустимы. Это может работать, потому что браузеры свободно отображают HTML (по сути, любой недопустимый элемент — это <div>), но его будет сложно отлаживать по мере продвижения вперед.
@zer00ne их оправдание использования этих выдуманных тегов из другого вопроса, stackoverflow.com/questions/76600623/…: «Потому что я хочу упростить поиск в css и написать меньше кода» :rolleyes:
«Я также могу добавить это сюда, если вы предпочитаете» - мы делаем; и легко понять или нет, имеет мало общего с этим. Надлежащий минимально воспроизводимый пример вашей проблемы всегда относится непосредственно к вашему вопросу — контент на сторонних платформах может со временем измениться или исчезнуть, в результате чего вопрос потеряет контекст для будущих читателей.
Lol @CBroe, да, прилагать усилия, чтобы не соответствовать стандартам ради меньшего количества кода, - это не то направление, в котором следует идти, если они хотят изучить какое-либо программирование.
Мы живем в 2023 году, и <main-categories> абсолютно действительна в стандартах W3. Они называются пользовательскими элементами и действительны до тех пор, пока они используют дефисы и следуют некоторым другим небольшим правилам.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Переместите селектор :hover на элемент main-categories:
main-categories:hover a:before {
content: "▪ News ▪ ";
}
main-categories:first-child:hover a:before {
content: "▪ Svea Times ▪ ";
}
Упрощенная версия с использованием атрибутов данных приведена ниже:
/*Adjust main category when child is hovered*/
main-categories:hover a:before {
content: "▪ News ▪ ";
}
/*USe Data Attribute to adjust hover content*/
main-categories sub-categories a:hover:before {
content: attr(data-prefix);
}
body,
html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
text-align: center;
width: 100%;
height: 100%;
}
body {
background-color: #ffffff;
font-family: "IBM Plex Serif", serif;
font-size: 16px;
font-weight: 400;
color: #121212;
}
a {
color: #121212;
text-decoration: none;
}
a:hover {
color: #e5633f;
}
nav {
margin: 0 auto;
width: 50%;
display: block;
text-align: center;
border-bottom: 3px solid #121212;
}
main-categories {
display: block;
position: relative;
width: 92%;
margin: 0 auto;
overflow: hidden;
height: auto;
text-align: left;
}
main-categories a {
display: block;
position: relative;
width: 100%;
height: 42px;
line-height: 42px;
font-size: 1em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px dotted #121212;
}
main-categories a:before {
content: "▪ ";
}
main-categories a:last-child {
border: 0;
}
main-categories a:hover {
color: #ffffff;
background-color: #121212;
padding-left: 25px;
}
main-categories:last-child {
border: 0;
}
sub-categories {
display: none;
position: relative;
width: auto;
height: auto;
text-align: left;
overflow: hidden;
padding-left: 25px;
padding-right: 25px;
margin: 0 auto;
}
sub-categories a {
display: block;
font-size: 0.938em;
color: #121212;
text-transform: capitalize;
text-align: left;
height: 38px;
line-height: 38px;
border-bottom: 1px dotted #121212;
}
sub-categories a:hover {
color: #e5633f;
background-color: inherit;
padding-left: 0px;
text-transform: capitalize;
}
sub-categories a:last-child {
border-bottom: 1px dotted #121212;
}
main-categories:hover sub-categories {
display: block;
}
sub-categories a:before {
content: "• ";
}
sub-categories a:hover:after {
content: "";
}<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel = "stylesheet">
<nav class = "menu">
<main-categories><a href = "#void">Education</a>
<sub-categories>
<a data-prefix = "• News • Education • " href = "#">Europe</a>
<a data-prefix = "• News • Education • " href = "#">Asia</a>
<a data-prefix = "• News • Education • " href = "#">Africa</a>
<a data-prefix = "• News • Education • " href = "#">Oceania</a>
<a data-prefix = "• News • Education • " href = "#">North America</a>
<a data-prefix = "• News • Education • " href = "#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href = "#void">Culture</a></main-categories>
</nav>Спасибо, Джон П. Кажется, все работает отлично.
Я тоже сегодня узнал кое-что новое благодаря вам
С элементами Sibling вы можете использовать следующий селектор
#a:hover ~ #b {
content: "▪ the content ▪ ";
}
Но если вы не реорганизуете html, вам нужно будет подключить javascript, когда элементы не могут быть выбраны с помощью css
document.getElementById('a').addEventListener('hover', )( => {
document.getElementById('b').style.content = "▪ the content ▪" })
})
отказ от ответственности: просто Gist, не проверенный код.
Избегайте размещения контента в CSS. Используйте атрибут данных в своем HTML, а затем ссылайтесь на него в CSS. Например
<a data-hovered=''• News • Education ">, CSS:content: attr(data-hovered). Это также удалит зависимость от индекса, после чего вы сможете изменить порядок элементов навигации, не беспокоясь о CSS.