如何在悬停多个子元素时设置父元素的背景？ [英] How to style the background of the parent element when hovering more then one child element?

问题描述

根据

如果您设置父级 position：relative ，它将包含任何 position：absolute children。

在父项的末尾创建一个新元素，然后使其位于位置：绝对并定位并调整它的大小然后使用 z-index：-1 将其设置在其余部分之后内容（例如按钮）。

然后，您可以使用 General Sibling Combinator（〜）在histed元素后面选择新元素。

  .facebook：hover〜.background {background-color：rgb（50，100，150）; } .twitter：hover〜.background {background-color：rgb（50，150，250）; } .google：hover〜.background {background-color：rgb（250，75，50）;} } .share {position：relative;}。background {position：absolute;左：0; top：0;宽度：100％;身高：100％; z-index：-1;} / *以下样式仅用于演示目的，不相关* / .facebook：before {background-position：-46px -28px;宽度：101px; } .twitter：before {background-position：-151px -28px;宽度：90像素; } .google：before {background-position：-245px -28px;宽度：94px; } .button：before {display：inline-block;内容：;高度：36px;背景图像：URL（ http://i.stack.imgur.com/AXvMk.png）; border-radius：3px; box-shadow：0px 2px 5px 0px rgba（0,0,0,0.2）; } .button {display：inline-block; padding：2px; } .white-container {padding：10px 20px; font-size：0;背景：#fff; border-radius：3px; } .background {background：#fff; } body {margin：0 4px; border：1px solid #aaa; border-top：0px; box-shadow：0px 2px 5px 0px rgba（0,0,0,0.1）} .share {padding：10px 15px; box-shadow：0px 5px 5px -5px rgba（0,0,0,0.3）inset} body：before {content：''; height：4px;显示：块;背景：#fff; border-bottom：1px solid #aaa} html {background：#efefef}  

 < div class =share> < div class =white-container> < a href =＃class =button facebook>< / a> < a href =＃class =button twitter>< / a> < a href =＃class =button google>< / a> < div class =background>< / div> < / div>< / div>  

According to a trick found in Stack overflow, I can change the background of the parent element hovering a child like this:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

But I need to change the background color hovering different child elements. For example, hovering the Facebook button, the background goes blue, while hovering the Google + button, the backgroud goes red.

I've tried this:

    <div class="share_box">
      <div class="white-container">

      <div class="facebook-sibling"/>
      <a class="facebook-child-button"/>

      <div class="twitter-sibling"/>
      <a class="twitter-child-button"/>

      <div class="googleplus-sibling"/>
      <a class="googleplus-child-button"/>

      </div>
  </div>

but for multiple buttons it didn't work. The result I expect is similar to:

解决方案

If you set the parent position: relative, it will contain any position: absolute children.

Create a new element inside the end of the parent, then make it position: absolute and position and size it so that it fills the parent.

Then use z-index: -1 to set it behind the rest of the content (e.g. the buttons).

Then you can use the General Sibling Combinator (~) to select the new element after the hovered element.

.facebook:hover ~ .background { background-color: rgb(50, 100, 150); }
.twitter:hover  ~ .background { background-color: rgb(50, 150, 250); }
.google:hover   ~ .background { background-color: rgb(250, 75, 50);  }

.share {
    position: relative;
}
.background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}                                                                                                                                                    /* Following styling for demo purposes only, not relevant */ .facebook:before { background-position:-46px -28px; width:101px; } .twitter:before { background-position:-151px -28px; width:90px; } .google:before { background-position:-245px -28px; width:94px; } .button:before { display:inline-block; content: ""; height:36px; background-image:url("http://i.stack.imgur.com/AXvMk.png"); border-radius: 3px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2); } .button { display:inline-block; padding: 2px; } .white-container { padding: 10px 20px; font-size: 0; background: #fff; border-radius: 3px; } .background { background: #fff; } body { margin: 0 4px; border: 1px solid #aaa; border-top: 0px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1) } .share { padding: 10px 15px; box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.3) inset } body:before { content: ''; height: 4px; display: block; background: #fff; border-bottom: 1px solid #aaa } html { background: #efefef }

<div class="share">
    <div class="white-container">
      <a href="#" class="button facebook"></a>
      <a href="#" class="button twitter"></a>
      <a href="#" class="button google"></a>
      <div class="background"></div>
    </div>
</div>

这篇关于如何在悬停多个子元素时设置父元素的背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！