将CSS应用于多个组件的悬停状态

Question

我有一个由三个组件组成的形状：

       *  *****************************  *
     ***  *                           *  ***
   *****  *                           *  *****
 *******  *****************************  *******

如上图所示，该形状由一个矩形和两个三角形（左侧和右侧各一个）组成。

当用户将鼠标悬停在其任一组件上时，我希望整个形状都变为相同的颜色。

我尝试了许多方法来完成这个任务，但没有取得多大成功。

以下是我目前用JSFiddle创建的代码。虽然形状有点问题，但我的主要问题是如何使对象的悬停功能正常工作。

尽管我在上面的fiddle中尝试了JavaScript，但我将接受任何其他可使代码运行的替代方法。

- HkFreaKuser1673718

---

最好的做法是在父元素上声明颜色，而不是在子元素上声明。 - SoluableNonagon

http://jsfiddle.net/a6p924od/1/ - SoluableNonagon

谢谢您的建议 :-) - HkFreaKuser1673718

Answer 1

我已经像这样完成了它：

<div class="container">
    ... your code    
</div>


.container:hover .tabStyle{
    background : #000;
    border-color: #000;
}

.container:hover .slopeLeft, .container:hover .slopeRight{
    border-bottom-color: #000;
}

其中 .container 是您的 div 元素的父元素

JSFiddle: http://jsfiddle.net/svzrkdu6/12/

- Michał Kutra

---

你没有为他的.slopeRight使用任何CSS，注意OP指定了他想要修改的两个三角形和一个矩形。你的CSS只修改了左边的三角形和矩形... - buydadip

谢谢您指出这个问题。我已经更新了我的答案。 - Michał Kutra

Answer 2

可以使用纯CSS来实现。修改你的代码行：

/* Just for an example */
.child {
  height: 20px;
  border: 1px solid black;
}

/* Your solution */
.parent:hover .child {
  background-color: red;
}

<div class="parent">
  <div class="child first">A</div>
  <div class="child second">B</div>
  <div class="child third">C</div>
</div>

- Shashank Agrawal

Answer 3

首先，您的JSFiddle未显示.slopeRight，我添加了以下HTML：

.slopeRight {
    border-bottom: 100px solid #D8D8D8;
    border-right: 50px solid transparent;
    position: absolute;
    top: 10px;
    left: 255px;                                
} 

我随后将所有矩形组件都包含在一个名为.wrap的div中，并添加了以下css样式：

.wrap:hover .tabStyle {
    backGround: red;
    border-color: red;
}

.wrap:hover .slopeLeft {
    border-color: transparent red red transparent ;
}

.wrap:hover .slopeRight {
    border-bottom: 100px solid red;
    border-right: 50px solid transparent;
}

这里有一个可用的fiddle...http://jsfiddle.net/svzrkdu6/10/

此外，你确定你想要三个组件来构建你的形状吗？如果不是，你可以创建一个梯形，这更加简洁...看看这个fiddle

http://jsfiddle.net/383rksx6/1/

- buydadip

---

非常感谢你，Bolboa <3 <3 - HkFreaKuser1673718