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

Html – Why does my hover effect only work on Chromium-based browsers and not on Firefox?

I have problem with this code

.podmenu {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 10rem;
    margin-left: 3rem;
    margin-bottom: 60px;

}

.verze {
    list-style: none;
    flex-direction: column;
    display: none;
    margin-top: 1rem;
    transition: 2s;
    margin-left: -2.94rem;
}

.podmenu:hover {
    .verze {
        display: flex;
    }
}
<ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
  </ul>
</li>
</ul>

It is supposed to show me variables when I hover the text in li with class n. The thing is that it works perfectly on chromium based browsers but not on Firefox.
I really dont know what to do and the point is mainl in that it does not work in firefox n othing else

Tags:

2

Answers


  1. 0

    It’s broken because your code is invalid. You cannot nest CSS selectors like this:

    .podmenu:hover {
    .verze {
        display: flex;
    }
}

    You have to write it like this:

    .podmenu:hover .verze {
    display: flex;
}

    Try the example below now:

    .podmenu {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 10rem;
  margin-left: 3rem;
  margin-bottom: 60px;
}

.verze {
  list-style: none;
  flex-direction: column;
  display: none;
  margin-top: 1rem;
  transition: 2s;
  margin-left: -2.94rem;
}

.podmenu:hover .verze {
  display: flex;
}
    <ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  2. 0 
    .podmenu:hover {
    .verze {
        display: flex;
    }
}

    The issue is that you are nesting CSS selectors, which in most browsers for the last 20-ish years was invalid syntax that would cause the CSS parser to abort and ignore the rest of the style rule. Nesting selectors is a feature of CSS preprocessors like Sass/SCSS, but they work by transpiling the nesting into a flat sequence of style rules.

    However, there is a new specification that adds the ability to nest selectors natively in CSS, which most browser vendors have agreed to implement. Chromium is the first of the browser engines to add support for CSS nesting in version 112. Safari added support for CSS nesting in version 16.5. As for Firefox, they’re still working on it as of the time I’m writing this. That’s why the nesting syntax currently works in Chromium, but not Firefox (yet).

    Note: native CSS nesting is not quite identical to Sass/SCSS nesting; there are a few subtle syntactic and semantic differences, which you can read the more about in the specification.

    To make your CSS currently support all browsers including Firefox, you need to flatten the nesting like so:

    .podmenu:hover .verze {
    display: flex;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search