代码之家  ›  专栏  ›  技术社区  ›  Toby Hede

包含所有子元素的悬停CSS

  •  22
  • Toby Hede  · 技术社区  · 17 年前

    <div class="app_setting">
      <label">Name</label>
      <input type="text" name="name"/>
    </div>
    
    .app_setting:hover {
      cursor:move;
    }
    

    有没有办法让悬停也应用于子元素?

    4 回复  |  直到 17 年前
        1
  •  39
  •   garrow    17 年前
    .app_setting *:hover { cursor:move }
    
        2
  •  23
  •   Linus Caldwell Emperor 2052    12 年前

    至少有两种方法:

    • 每个子级的悬停状态,可以是显式的,也可以是带 * 选择器,正如garrow所建议的 .class *:hover
    • 将悬停状态级联到子级 .class:hover *

    可能还有其他的

        3
  •  2
  •   boz drunkel    13 年前

    这不是css的答案,但它可能仍然对您有用。

    其他人已经建议您可能必须使用javascript来实现浏览器兼容性。如果您确实使用javascript,那么可以使用jquery库来简化。

    $(".appsetting").hover(hoverInFunc,hoverOutFunc);

    这将设置一个事件处理程序,用于将鼠标悬停在所选元素中或从所选元素中移出,并与中的css样式选择器相匹配 $() 呼叫

        4
  •  1
  •   Jonathan Arkell    17 年前

    你可能不得不求助于JS来实现IE6。