• <bdo id='pTO5c'></bdo><ul id='pTO5c'></ul>
    <i id='pTO5c'><tr id='pTO5c'><dt id='pTO5c'><q id='pTO5c'><span id='pTO5c'><b id='pTO5c'><form id='pTO5c'><ins id='pTO5c'></ins><ul id='pTO5c'></ul><sub id='pTO5c'></sub></form><legend id='pTO5c'></legend><bdo id='pTO5c'><pre id='pTO5c'><center id='pTO5c'></center></pre></bdo></b><th id='pTO5c'></th></span></q></dt></tr></i><div id='pTO5c'><tfoot id='pTO5c'></tfoot><dl id='pTO5c'><fieldset id='pTO5c'></fieldset></dl></div>
      <legend id='pTO5c'><style id='pTO5c'><dir id='pTO5c'><q id='pTO5c'></q></dir></style></legend>

      <small id='pTO5c'></small><noframes id='pTO5c'>

      <tfoot id='pTO5c'></tfoot>

      1. 使用 CSS 级联 &lt;li&gt;-hover 效果

        时间:2023-11-29
            <tbody id='mfw3Z'></tbody>

          • <legend id='mfw3Z'><style id='mfw3Z'><dir id='mfw3Z'><q id='mfw3Z'></q></dir></style></legend>
            <tfoot id='mfw3Z'></tfoot>

              <small id='mfw3Z'></small><noframes id='mfw3Z'>

                <bdo id='mfw3Z'></bdo><ul id='mfw3Z'></ul>
                <i id='mfw3Z'><tr id='mfw3Z'><dt id='mfw3Z'><q id='mfw3Z'><span id='mfw3Z'><b id='mfw3Z'><form id='mfw3Z'><ins id='mfw3Z'></ins><ul id='mfw3Z'></ul><sub id='mfw3Z'></sub></form><legend id='mfw3Z'></legend><bdo id='mfw3Z'><pre id='mfw3Z'><center id='mfw3Z'></center></pre></bdo></b><th id='mfw3Z'></th></span></q></dt></tr></i><div id='mfw3Z'><tfoot id='mfw3Z'></tfoot><dl id='mfw3Z'><fieldset id='mfw3Z'></fieldset></dl></div>

                  本文介绍了使用 CSS 级联 &lt;li&gt;-hover 效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我有一个简单的 html 无序列表.

                  I have got an simple html unordered list.

                  <ul>
                      <li>Item 1</li>
                      <li>
                          Group 1
                          <ul>
                              <li>Item 2</li>
                              <li>Item 3</li>
                          </ul>
                      </li>
                  </ul>
                  

                  我想在鼠标悬停在 Item 或 Group 上时使用 CSS 制作一个简单的效果.

                  I want to use CSS to make a simple effect when the mouse is over an Item or a Group.

                  li:hover
                  {
                      background-color:#ff0000;
                  }
                  

                  它对组 1"或项目 1"(不包含在组中)非常有效 - 当我将鼠标移到颜色变化上时.但是,如果我移过第 2 项"或第 3 项",第 1 组"也仍然突出显示(红色背景).在这种情况下,我只想突出显示Item 2"或Item 3".

                  It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to highlight "Item 2" or "Item 3".

                  有人知道怎么做吗?

                  感谢您的帮助!

                  ================================编辑

                  =============================== EDIT

                  <ul>
                      <li>Item 1</li>
                      <li>
                          Group 1
                          <ul>
                              <li>Item 2</li>
                              <li>Group 2
                                  <ul>
                                      <li>Item 3</li>
                                      <li>Item 4</li>
                                  </ul>
                              </li>
                          </ul>
                      </li>
                  </ul>
                  

                  将鼠标悬停在 xxx 上应突出显示 yyy
                  xxx -> 年年
                  项目 1 -> 项目 1
                  Group1 -> Group1, Item2, Group2, Item3, Item4
                  项目 2 -> 项目 2
                  Group2 -> Group2, Item3, Item4
                  项目 3 -> 项目 3
                  第 4 项 -> 第 4 项

                  Mouse Over xxx should highlight yyy
                  xxx -> yyy
                  Item1 -> Item1
                  Group1 -> Group1, Item2, Group2, Item3, Item4
                  Item2 -> Item2
                  Group2 -> Group2, Item3, Item4
                  Item3 -> Item3
                  Item4 -> Item4

                  请参阅http://image-upload.de/image/r76d79/1c7af56a19.png,只是一个快速的绘图.

                  Please see http://image-upload.de/image/r76d79/1c7af56a19.png ,just a quick drawing.

                  推荐答案

                  在 jQuery 文档中找到了可能是最好的解决方案.http://api.jquery.com/event.stopPropagation/

                  Found probably the best solution at the jQuery documentation. http://api.jquery.com/event.stopPropagation/

                  $('li').mouseover(function(e)
                  {
                      e.stopPropagation();
                      $(this).addClass('hover');
                  });
                  
                  $('li').mouseout(function()
                  {
                      $(this).removeClass('hover');
                  });
                  

                  这篇关于使用 CSS 级联 &lt;li&gt;-hover 效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:CSS 背景图片大小转换 下一篇:下拉菜单中的最后一个选项在 Google Chrome 32.0.1700.76 m 中没有获得悬停效果

                  相关文章

                1. <small id='tjXD2'></small><noframes id='tjXD2'>

                    <tfoot id='tjXD2'></tfoot>
                    • <bdo id='tjXD2'></bdo><ul id='tjXD2'></ul>

                    <legend id='tjXD2'><style id='tjXD2'><dir id='tjXD2'><q id='tjXD2'></q></dir></style></legend>
                    <i id='tjXD2'><tr id='tjXD2'><dt id='tjXD2'><q id='tjXD2'><span id='tjXD2'><b id='tjXD2'><form id='tjXD2'><ins id='tjXD2'></ins><ul id='tjXD2'></ul><sub id='tjXD2'></sub></form><legend id='tjXD2'></legend><bdo id='tjXD2'><pre id='tjXD2'><center id='tjXD2'></center></pre></bdo></b><th id='tjXD2'></th></span></q></dt></tr></i><div id='tjXD2'><tfoot id='tjXD2'></tfoot><dl id='tjXD2'><fieldset id='tjXD2'></fieldset></dl></div>