Css a:hover:after:nth-child 1,2,3,4,5 content in dropdown navbar not displaying

huangapple
go评论120阅读模式
英文:

Css a:hover:after:nth-child 1,2,3,4,5 content in dropdown navbar not displaying

问题

I created a simple navbar and I would love to add some css-nth-child:before to the menu depending on the main category

The dropdown navbar has 5 different categories:

  1. News, Politics, Economy, Health and Education

Each category has its own subcategories with region names like this:

  1. Europe, Asia, Africa, Oceania, North America and South America

What I want is:
when people put their mouse over (hover) lets say category: Politics, and the mouse is over the Politics sub-categories, on hover I want to display like this:

  1. Politics news from Europe
  2. Politics news from Asia
  3. Politics news from Africa
  4. etc

But if the mouse is over (hover) the category Economy and the mouse is over the Economy sub-categories, on hover I want to display like this:

  1. Economy news from Europe
  2. Economy news from Asia
  3. Economy news from Africa
  4. etc

What I tried is the following CSS

  1. sub-categories a:hover:after:nth-child(2)  
  2. {content: 'Politics news from • ';
  3. sub-categories a:hover:after:nth-child(3)  
  4. {content: 'Economy news from • ';
  5. sub-categories a:hover:after:nth-child(4)  
  6. {content: 'Health news from • ';

But it is not working

Here is the HTML

  1. <main-categories><a href="#void"><strong>▪</strong>News</a>
  2.   <sub-categories>
  3.     <a href="#">Sweden</a>
  4.     <a href="#">Europe</a>
  5.     <a href="#">Asia</a>
  6.     <a href="#">Africa</a>
  7.     <a href="#">Oceania</a>
  8.     <a href="#">North America</a>
  9.     <a href="#">South America</a>
  10.   </sub-categories>
  11. </main-categories>
  13. <main-categories><a href="#void"><strong>▪</strong>Politics</a>
  14.   <sub-categories>
  15.     <a href="#">Sweden</a>
  16.     <a href="#">Europe</a>
  17.     <a href="#">Asia</a>
  18.     <a href="#">Africa</a>
  19.     <a href="#">Oceania</a>
  20.     <a href="#">North America</a>
  21.     <a href="#">South America</a>
  22.   </sub-categories>
  23. </main-categories>
  25. <main-categories><a href="#void"><strong>▪</strong>Economy</a>
  26.   <sub-categories>
  27.     <a href="#">Sweden</a>
  28.     <a href="#">Europe</a>
  29.     <a href="#">Asia</a>
  30.     <a href="#">Africa</a>
  31.     <a href="#">Oceania</a>
  32.     <a href="#">North America</a>
  33.     <a href="#">South America</a>
  34.   </sub-categories>
  35. </main-categories>
  37. <main-categories><a href="#void"><strong>▪</strong>Health</a>
  38.   <sub-categories>
  39.     <a href="#">Sweden</a>
  40.     <a href="#">Europe</a>
  41.     <a href="#">Asia</a>
  42.     <a href="#">Africa</a>
  43.     <a href="#">Oceania</a>
  44.     <a href="#">North America</a>
  45.     <a href="#">South America</a>
  46.   </sub-categories>
  47. </main-categories>

and the CSS is

  1. main-categories 
  2. {position:relative;display:block;
  3. text-align:left;width:92%;margin:0 auto;overflow:hidden;}
  4. main-categories a 
  5. {position:relative;margin:0 auto;display:block;
  6. font-size:15px;text-transform:uppercase;
  7. text-align:left;padding:12px 0 12px 0;width:100%;
  8. border-bottom:1px dotted #121212;overflow:hidden}
  9. main-categories a:last-child 
  10. {border:0}	
  11. main-categories a:hover 
  12. {text-decoration:none;
  13. color:#FFFFFF;background-color:#121212;padding-left:13px;}
  14. main-categories:last-child 
  15. {border:0}
  16. sub-categories {display:none;position:relative;width:90%;
  17. left:50%;transform:translatex(-50%);
  18. text-align:left;overflow:hidden}
  19. sub-categories a 
  20. {display:block;font-size:15px;color:#121212;
  21. text-transform:capitalize;padding:10px 0 10px 0;text-align:left;
  22. border-bottom:1px dotted #121212}
  23. sub-categories a:hover 
  24. {color:#FFFFFF;background-color:#121212;padding-left:20px;}
  25. sub-categories a:last-child
  26.  {border-bottom:1px dotted #121212}	
  27. main-categories:hover sub-categories 
  28. {display:block}
  29. sub-categories a:before{content: '• ';}
  30. sub-categories a:hover:after:nth-child(1) 
  31.  {content: 'News from • ';
  32. sub-categories a:hover:after:nth-child(2) 
  33.  {content: 'Politics from • ';
  34. sub-categories a:hover:after:nth-child(3) 
  35.  {content: 'Economy from • ';

I also created a Codepen to see it live

https://codepen.io/familias/pen/XWygWzY

英文:

I created a simple navbar and I would love to add some css-nth-child:before to the menu depending on the main category

The dropdown navbar has 5 different categories:

  1. News, Politics, Economy, Health and Education

Each category has its own subcategories with region names like this:

  1. Europe, Asia, Africa, Oceania, North America and South America

What I want is:
when people put their mouse over (hover) lets say category: Politics, and the mouse is over the Politics sub-categories, on hover I want to display like this:

  1. Politics news from Europe
  2. Politics news from Asia
  3. Politics news from Africa
  4. etc

But if the mouse is over (hover) the category Economy and the mouse is over the Economy sub-categories, on hover I want to display like this:

  1. Economy news from Europe
  2. Economy news from Asia
  3. Economy news from Africa
  4. etc

What I tried is the following CSS

  1.     sub-categories a:hover:after:nth-child(2)  
  2. {content: &#39;Politics news from • &#39;;
  3. sub-categories a:hover:after:nth-child(3)  
  4. {content: &#39;Economy news from • &#39;;
  5. sub-categories a:hover:after:nth-child(4)  
  6. {content: &#39;Health news from • &#39;;

But it is not working

Here is the HTML

  1. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;News&lt;/a&gt;
  2. &lt;sub-categories&gt;
  3. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  4. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  5. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  6. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  7. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  8. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  9. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  10. &lt;/sub-categories&gt;
  11. &lt;/main-categories&gt;
  12. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Politics&lt;/a&gt;
  13. &lt;sub-categories&gt;
  14. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  15. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  16. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  17. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  18. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  19. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  20. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  21. &lt;/sub-categories&gt;
  22. &lt;/main-categories&gt;
  23. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Economy&lt;/a&gt;
  24. &lt;sub-categories&gt;
  25. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  26. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  27. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  28. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  29. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  30. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  31. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  32. &lt;/sub-categories&gt;
  33. &lt;/main-categories&gt;
  34. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Health&lt;/a&gt;
  35. &lt;sub-categories&gt;
  36. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  37. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  38. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  39. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  40. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  41. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  42. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  43. &lt;/sub-categories&gt;
  44. &lt;/main-categories&gt;

and the CSS is

  1. main-categories 
  2. {position:relative;display:block;
  3. text-align:left;width:92%;margin:0 auto;overflow:hidden;}
  4. main-categories a 
  5. {position:relative;margin:0 auto;display:block;
  6. font-size:15px;text-transform:uppercase;
  7. text-align:left;padding:12px 0 12px 0;width:100%;
  8. border-bottom:1px dotted #121212;overflow:hidden}
  9. main-categories a:last-child 
  10. {border:0}	
  11. main-categories a:hover 
  12. {text-decoration:none;
  13. color:#FFFFFF;background-color:#121212;padding-left:13px;}
  14. main-categories:last-child 
  15. {border:0}
  16. sub-categories {display:none;position:relative;width:90%;
  17. left:50%;transform:translatex(-50%);
  18. text-align:left;overflow:hidden}
  19. sub-categories a 
  20. {display:block;font-size:15px;color:#121212;
  21. text-transform:capitalize;padding:10px 0 10px 0;text-align:left;
  22. border-bottom:1px dotted #121212}
  23. sub-categories a:hover 
  24. {color:#FFFFFF;background-color:#121212;padding-left:20px;}
  25. sub-categories a:last-child
  26. {border-bottom:1px dotted #121212}	
  27. main-categories:hover sub-categories 
  28. {display:block}
  29. sub-categories a:before{content: &#39;• &#39;;}
  30. sub-categories a:hover:after:nth-child(1) 
  31. {content: &#39;News from • &#39;;
  32. sub-categories a:hover:after:nth-child(1) 
  33. {content: &#39;Politics from • &#39;;
  34. sub-categories a:hover:after:nth-child(1) 
  35. {content: &#39;Economy from • &#39;;

I also created a Codepen to see it live

https://codepen.io/familias/pen/XWygWzY

答案1

得分: 1

你在使用集成开发环境吗？因为你的最后一段CSS代码有问题，缺少了闭合的大括号。在集成开发环境中工作会对你有很大帮助。

你可以通过在 main-categories 上使用 nth-of-type() 操作符来实现这个效果。示例代码如下：

  1. main-categories:nth-of-type(1) sub-categories a:hover:before {
  2.     content: '• News from ';
  3. }
  5. main-categories:nth-of-type(2) sub-categories a:hover:before {
  6.     content: '• Political news from ';
  7. }

以下是你提供的CSS和HTML代码的翻译：

  1. main-categories {
  2.     position: relative;
  3.     display: block;
  4.     text-align: left;
  5.     width: 92%;
  6.     margin: 0 auto;
  7.     overflow: hidden;
  8. }
  10. main-categories a {
  11.     position: relative;
  12.     margin: 0 auto;
  13.     display: block;
  14.     font-size: 15px;
  15.     text-transform: uppercase;
  16.     text-align: left;
  17.     padding: 12px 0 12px 0;
  18.     width: 100%;
  19.     border-bottom: 1px dotted #121212;
  20.     overflow: hidden;
  21. }
  23. main-categories a:last-child {
  24.     border: 0;
  25. }
  27. main-categories a:hover {
  28.     text-decoration: none;
  29.     color: #FFFFFF;
  30.     background-color: #121212;
  31.     padding-left: 13px;
  32. }
  34. main-categories:last-child {
  35.     border: 0;
  36. }
  38. sub-categories {
  39.     display: none;
  40.     position: relative;
  41.     width: 90%;
  42.     left: 50%;
  43.     transform: translateX(-50%);
  44.     text-align: left;
  45.     overflow: hidden;
  46. }
  48. sub-categories a {
  49.     display: block;
  50.     font-size: 15px;
  51.     color: #121212;
  52.     text-transform: capitalize;
  53.     padding: 10px 0 10px 0;
  54.     text-align: left;
  55.     border-bottom: 1px dotted #121212;
  56. }
  58. sub-categories a:hover {
  59.     color: #FFFFFF;
  60.     background-color: #121212;
  61.     padding-left: 20px;
  62. }
  64. sub-categories a:last-child {
  65.     border-bottom: 1px dotted #121212;
  66. }
  68. main-categories:hover sub-categories {
  69.     display: block;
  70. }
  72. sub-categories a:before {
  73.     content: '• ';
  74. }
  76. main-categories:nth-of-type(1) sub-categories a:hover:before {
  77.     content: '• News from ';
  78. }
  80. main-categories:nth-of-type(2) sub-categories a:hover:before {
  81.     content: '• Political news from ';
  82. }

HTML部分不需要翻译。

英文:

Are you working in an IDE? Because your last CSS is broken and missing closing brackets. Working in an IDE would help you out a lot.

You can achieve this effect by using the nth-of-type() operater on main-categories. Example:

  1. main-categories:nth-of-type(1) sub-categories a:hover:before {
  2. content: &#39;• News from &#39;;
  3. }
  4. main-categories:nth-of-type(2) sub-categories a:hover:before {
  5. content: &#39;• Political news from &#39;;
  6. }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. main-categories {
  2. position:relative;
  3. display:block;
  4. text-align:left;
  5. width:92%;
  6. margin:0 auto;
  7. overflow:hidden;
  8. }
  9. main-categories a {
  10. position:relative;
  11. margin:0 auto;
  12. display:block;
  13. font-size:15px;
  14. text-transform:uppercase;
  15. text-align:left;
  16. padding:12px 0 12px 0;
  17. width:100%;
  18. border-bottom:1px dotted #121212;
  19. overflow:hidden
  20. }
  21. main-categories a:last-child {
  22. border:0
  23. }
  24. main-categories a:hover {
  25. text-decoration:none;
  26. color:#FFFFFF;
  27. background-color:#121212;
  28. padding-left:13px;
  29. }
  30. main-categories:last-child {
  31. border:0
  32. }
  33. sub-categories {
  34. display:none;
  35. position:relative;
  36. width:90%;
  37. left:50%;
  38. transform:translatex(-50%);
  39. text-align:left;
  40. overflow:hidden
  41. }
  42. sub-categories a {
  43. display:block;
  44. font-size:15px;
  45. color:#121212;
  46. text-transform:capitalize;
  47. padding:10px 0 10px 0;
  48. text-align:left;
  49. border-bottom:1px dotted #121212
  50. }
  51. sub-categories a:hover {
  52. color:#FFFFFF;
  53. background-color:#121212;
  54. padding-left:20px;
  55. }
  56. sub-categories a:last-child {
  57. border-bottom:1px dotted #121212
  58. }
  59. main-categories:hover sub-categories {
  60. display:block
  61. }
  62. sub-categories a:before{
  63. content: &#39;• &#39;;
  64. }
  65. main-categories:nth-of-type(1) sub-categories a:hover:before {
  66. content: &#39;• News from &#39;;
  67. }
  68. main-categories:nth-of-type(2) sub-categories a:hover:before {
  69. content: &#39;• Political news from &#39;;
  70. }

<!-- language: lang-html -->

  1. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;News&lt;/a&gt;
  2. &lt;sub-categories&gt;
  3. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  4. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  5. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  6. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  7. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  8. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  9. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  10. &lt;/sub-categories&gt;
  11. &lt;/main-categories&gt;
  12. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Politics&lt;/a&gt;
  13. &lt;sub-categories&gt;
  14. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  15. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  16. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  17. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  18. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  19. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  20. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  21. &lt;/sub-categories&gt;
  22. &lt;/main-categories&gt;
  23. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Economy&lt;/a&gt;
  24. &lt;sub-categories&gt;
  25. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  26. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  27. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  28. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  29. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  30. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  31. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  32. &lt;/sub-categories&gt;
  33. &lt;/main-categories&gt;
  34. &lt;main-categories&gt;&lt;a href=&quot;#void&quot;&gt;&lt;strong&gt;▪&lt;/strong&gt;Health&lt;/a&gt;
  35. &lt;sub-categories&gt;
  36. &lt;a href=&quot;#&quot;&gt;Sweden&lt;/a&gt;
  37. &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  38. &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  39. &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  40. &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  41. &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  42. &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  43. &lt;/sub-categories&gt;
  44. &lt;/main-categories&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 02:39:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/76600300.html
  • css
  • html
  • javascript
  • jquery
  • menu
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定