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

Applying CSS on hover to multiple components

本文关键字：组件 CSS 悬停 应用于      更新时间：2023-09-26

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

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

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

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

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

这是我目前在JSFiddle上拥有的内容。

形状有点不对劲，但我主要关心的是如何让悬停功能适用于我的对象。

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

我像这里一样做到了：

<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/

使用纯 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>

首先，你的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/

相关文章：