Html CSS同时悬停div和link

这个论坛很棒，已经为我节省了很多时间，
这是一件相对简单的事情，但我整天都在绞尽脑汁，找不到解决办法

它本质上是一个看起来像“按钮”的div，定义了大小、背景和边框。
我试图让链接和div的边框/背景在悬停时亮起，但没有效果。
我只能更改其中一个链接或“按钮” 因此，html：

<div align="middle" class="main_button1"><a href="/about/">Learn more</a></div>

但每当我试图定义悬停效果时：

.main\u按钮1:悬停

不会影响链接
和

.main\u按钮1A:hover

不会影响div，只会影响链接 这是我徒劳的尝试，它只更改div颜色，而不更改链接

.main_button1:hover { 
    border: 3px solid #98a2a7;
    padding: 10px;
    border-radius: 22px;
    background: #98a2a7;

    a { color: red; }
}

有什么建议吗？哦，智者（和智者）？

---

提前谢谢

在悬停规则中有锚定标记样式。把它放在一个像这样的新规则里

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.main_button1a:已访问{
颜色：#98a2a7；}
.main_按钮1:悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.main_按钮1:悬停a{color:red；}

---

在悬停规则中有锚定标记样式。把它放在一个像这样的新规则里

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.main_button1a:已访问{
颜色：#98a2a7；}
.main_按钮1:悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.main_按钮1:悬停a{color:red；}

小提琴链接：

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.main_button1a:已访问{
颜色：#98a2a7；
}
.main_按钮1:悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.main_按钮1：悬停a{
颜色：红色；
}

小提琴链接：

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.main_button1a:已访问{
颜色：#98a2a7；
}
.main_按钮1:悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.main_按钮1：悬停a{
颜色：红色；
}

---

您需要将CSS同时应用于两者

.main_button1:hover, .main_button1 a:hover {border: 3px solid #98a2a7; padding:10px; border-radius: 22px; background: #98a2a7;}

---

您需要将CSS同时应用于两者

.main_button1:hover, .main_button1 a:hover {border: 3px solid #98a2a7; padding:10px; border-radius: 22px; background: #98a2a7;}

---

在我看来，你好像在用SCSS编码。也许你会感到困惑，无论如何，我只是简单地将SCS转换为常规CSS：

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.主按钮1A：已访问{
颜色：#98a2a7；
}
.主按钮1：悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.主按钮1：悬停a{
颜色：红色；
}

---

在我看来，您好像是在用SCSS编码。也许你会感到困惑，无论如何，我只是简单地将SCS转换为常规CSS：

.main\u按钮1{
保证金：自动；
线高：2；
宽度：180px；
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景：白色；
}
.主按钮1 a{
颜色：#98a2a7；
}
.主按钮1A：已访问{
颜色：#98a2a7；
}
.主按钮1：悬停{
边框：3px实心#98a2a7；
填充：10px；
边界半径：22px；
背景#98a2a7；
}
.主按钮1：悬停a{
颜色：红色；
}

---

您正在使用scss吗？您现在使用的似乎有效。重要的是，我们知道您是否正在使用scss/less？您现在使用的似乎有效。重要的是，我们知道您是否正在使用scss/less，这取决于OP是否使用css预处理器，而不是取决于OP是否使用css预处理器不是这样的！看在上帝的份上，我不知道为什么它以前对我不起作用。谢谢成功了！看在上帝的份上，我不知道为什么它以前对我不起作用。谢谢那对我不起作用。。以上的答案已经做到了。谢谢那对我不起作用。。以上的答案已经做到了。谢谢