html – 将鼠标悬停在单独的子div上时,将父div更改为不同的背景

发布时间：2020-12-14 18:53:31 所属栏目：资源来源：网络整理

导读：在处理只有一个希望的悬停效果时,我正在看到解决方案来实现这一点,但是我想要有四个子div,每个div都改变主父div 背景到一个单独的图像. 我假设这是不可能的CSS. div id="buttonBox" div id="schedBox" a href="#"Schedule/a /div div id="transBox" a href="

在处理只有一个希望的悬停效果时,我正在看到解决方案来实现这一点,但是我想要有四个子div,每个div都改变主父div
背景到一个单独的图像.

我假设这是不可能的CSS.

<div id="buttonBox">
   <div id="schedBox">
     <a href="#">Schedule</a>
   </div>
   <div id="transBox">
     <a href="#">Transformation</a>
   </div>
   <div id="destBox">
     <a href="#">Destination</a>
   </div>
   <div id="inspirBox">
     <a href="#">Inspiration</a>
   </div>
</div>

或者,我可以让孩子div每个都有不同的背景.悬停一个孩子的div会将所有的小孩背景变成一个单独的颜色,但我无法弄清楚如何在第二个div上悬停一个影响之前的div ..只有后来的兄弟姐妹.

解决方法

虽然实际的父选择器是不可能通过CSS,你可以“黑客”为您的情况使用额外的元素和定位.

你需要的是根据什么元素来改变背景 – 好的！我们添加伪元素(如果您需要IE支持,则添加正常元素),并使用绝对定位和正z-index将它们放置在父对象上：

#buttonBox {
    position: relative;
    z-index: 1;
}

#buttonBox > div:before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

那些定位的元素应该具有负的z-index,因此它们将被放置在所有其他内容之下,而不是父元素的背景.

这样你可以添加规则

#schedBox:hover:before  { background: lime;   }
#transBox:hover:before  { background: red;    }
#destBox:hover:before   { background: orange; }
#inspirBox:hover:before { background: yellow; }

而父亲的伪背景将在悬停上改变！

唯一需要知道的是,不应该有父元素和具有后台角色的元素之间具有非静态位置的元素.

Here is the live example at dabblet

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!