问题 如何申请孩子：悬停但不是父母：悬停


使用以下html，当我将鼠标悬停在子项上时，我获得了父项的绿色背景。我怎么能阻止这种情况发生？如果我在子元素之外盘旋，我确实想要绿色背景。

CSS3很好。

<style>
        .parent { padding: 100px; width: 400px; height:400px; }
        .parent:hover { background-color: green; }
        .child { padding: 100px; width: 200px; height:200px; }
        .child:hover { background-color: blue; }
</style>
<div class="parent">
        <div class="child">Child</div>
</div>

5971
2018-04-23 17:49


起源

答案:

所以这真的很难看，但它有效（有点）。我基本上创建了父母的副本作为孩子的兄弟姐妹。 parent-overwrite默认隐藏，然后显示在child的悬停上。 Chrome不喜欢它，除非您使用+选择器而不是〜选择器。这不是很可扩展，但它可能有效。

正如其他人发布的那样，javascript可能是更好的解决方案。

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

8
2018-04-23 19:38


感谢您的尝试:)但是，由于可扩展性，这对我不起作用。 - case nelson
哈哈哈谢谢，这是一个有趣的问题需要解决。我以前完全遇到过这个完全相同的问题，但我认为我的解决方案是手动更改没有悬停声明的父级的类。这对你不起作用，因为你希望你的父母悬停仍然工作。我的程序员认为我会因为这个丑陋丑陋的黑客而受到严厉贬值。谢谢你证明他错了;） - Bryan Downing

答案:

所以这真的很难看，但它有效（有点）。我基本上创建了父母的副本作为孩子的兄弟姐妹。 parent-overwrite默认隐藏，然后显示在child的悬停上。 Chrome不喜欢它，除非您使用+选择器而不是〜选择器。这不是很可扩展，但它可能有效。

正如其他人发布的那样，javascript可能是更好的解决方案。

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

8
2018-04-23 19:38


感谢您的尝试:)但是，由于可扩展性，这对我不起作用。 - case nelson
哈哈哈谢谢，这是一个有趣的问题需要解决。我以前完全遇到过这个完全相同的问题，但我认为我的解决方案是手动更改没有悬停声明的父级的类。这对你不起作用，因为你希望你的父母悬停仍然工作。我的程序员认为我会因为这个丑陋丑陋的黑客而受到严厉贬值。谢谢你证明他错了;） - Bryan Downing

我只能通过添加额外的标记来完成此操作。需要添加一个空div，它基本上用作父背景。看看这里的CSS。

HTML部分：

  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>

CSS部分：

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

http://jsbin.com/ubiyo3/edit


2
2018-04-23 19:57



最简单的方法是使用JS来实现这种CSS。也许您可以尝试重新考虑您的实施。你为什么要这样做？


1
2018-04-23 18:04


我有一个很大的元素树，其中一些将响应鼠标点击。我只希望突出显示响应点击的元素。在javascript中执行此操作将意味着基于鼠标悬停/鼠标移动的样式，并将显着膨胀代码库。 - case nelson
它不会膨胀代码库 - 如果你使用jQuery，它将是大约4-5行代码。在伪代码中：$（'。parent'）。hover（function（）{...将CSS设置为Green ...}）; $（'。child'）。hover（function（）{this.parent.css（.. set css to white ..}）; - Tilo Mitra

使用普通的CSS无法做到这一点。你要求一个孩子的伪班（child:hover）影响 background 父母的声明。使用常规css无法指定那种东西。

这绝对可以使用javascript完成。


1
2018-04-23 18:08


我不相信这不能用CSS完成。我想我想以某种方式改变.parent：hover只选择是否有没有悬停的子元素。这样子进程就不会影响父声明，而父选择器会更加清晰。 - case nelson
没有;这正是CSS设计师所排除的。编码，规范和使用这种模型几乎是不可能的。在XPATH中，可以使用父选择器，但是没有伪元素和类可以担心。对他们来说这是一个艰难的决定，但是你 不能 使用CSS允许子选择器过滤回来影响父级。 - Nicholas Wilson

我认为这是一个更好的解决方案，因为它可以扩展到更多级别，尽可能多，不仅仅是两个或三个。

我使用边框，但也可以使用任何想要的样式，如背景颜色。

有了边界，这个想法是：

  • 有一个不同的边框颜色只有一个div，鼠标所在的div，而不是任何父级，而不是任何子级，所以只能看到不同颜色的div边框，其余颜色为白色。

您可以在以下位置测试： http://jsbin.com/ubiyo3/13

这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

0
2018-02-06 09:49



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来