Question

我有一个由3个组成部分组成的形状：

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

如上图所示，形状由一个由两个三角形包围的矩形组成（一个在左侧，一个在右侧）。

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

我尝试过使用各种方法来完成这项任务，但没有取得多大成功。

这是我目前拥有的on JSFiddle。

形状有点偏，但我主要担心的是如何使悬停功能适用于我的对象。

即使我尝试在上面的小提琴中实现JavaScript，我也会接受任何其他可以让我的代码工作的替代方法。

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/

Answer 2

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

＆＃13;

/* Just for an example */
.child {
  height: 20px;
  border: 1px solid black;
}

/* Your solution */
.parent:hover .child {
  background-color: red;
}

＆＃13;

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

＆＃13;

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;
}

这是一个工作小提琴...... http://jsfiddle.net/svzrkdu6/10/

此外，你确定你想要3个组件吗？因为如果没有，你可能会创建一个梯形，这更简洁......看看这个小提琴

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

在悬停时将CSS应用于多个组件

3 个答案: