我不知道你想达到什么目的，因为你在代码中使用的十六进制代码是红色的，而不是蓝色的，正如你所指出的。
无论哪种方式，你都可以使用ID来实现这个功能。在包含所有3个框的容器上使用ID“opt-container”，然后在所有3个按钮元素上使用ID“opt-btn”。然后使用下面的代码，这应该会使所有3个框的文本都变成红色，按钮也是红色，而按钮的文本颜色保持白色：）

悬停效果同时应用于所有3个框

#opt-container:hover h3,
#opt-container:hover h6
{
    color: #ff0000;
}

#opt-container:hover #opt-btn
{
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff;
}

如果你想让整个框在悬停时改变颜色，那么你可以给3个容器中的每一个添加ID“opt-box”，并使用下面的代码：

#opt-container:hover #opt-box 
{
    background-color: #26ABE2;
}

悬停效果单独应用于每个框

***（回应您的评论：）***为您的框使用3个不同的ID（类可能也可以），并将它们命名为“opt-box-1”、“opt-box-2”和“opt-box-3”。还可以在3个按钮元素上添加ID（或类）“opt-btn-1”、“opt-btn-2”和“opt-btn-3”。然后使用以下代码更改悬停时的背景：

#opt-box-1:hover,
#opt-box-2:hover,
#opt-box-3:hover

{
    background-color: #26ABE2;
}

下面的代码更改悬停时的字体颜色（h3和h6）：

#opt-box-1:hover h3,
#opt-box-1:hover h6,
#opt-box-2:hover h3,
#opt-box-2:hover h6,
#opt-box-3:hover h3,
#opt-box-3:hover h6
{
    color: #ff0000;
}