如何在元素及其父容器上使用css悬停？

这是你的电话号码。 HTML：

<div class="myDiv">
    <div class="subDiv">hover me</div>
</div>

我想要的是：
文本悬停时，文本和橙色边框的颜色将发生变化。
我的解决方案是：

.subDiv:hover{
    color: #ffa609;
    transition: all 1s;
}

.subDiv:hover.myDiv{
    border: 5px solid rgba(255,166,9,1);    
}

看来只有第一次悬停有效。有人能告诉我为什么或其他解决方案吗？（请使用纯CSS）

演示-

css中没有父选择器

相反，您可以在父div悬停时使用此选项来更改其样式

.myDiv{
宽度：200px；
高度：20px；
边框：5px实心rgba（255,166,9,0.1）；
过渡：所有1；
}
.subDiv{
文字装饰：下划线；
文本对齐：居中；
光标：指针；
}
.myDiv:hover.subDiv{
颜色：#ffa609；
过渡：所有1；
}
.myDiv:悬停{
边框：5px实心rgba（255、166、9、1）；
}

盘旋我

默认情况下，div是

显示：block

，将展开以占据其父级宽度。要使文本仅在文本本身悬停时变为橙色，请执行以下操作：

.myDiv .subDiv:hover {
   color: #ffa609;
}

• 使

  .subDiv

  显示：inline

  （根据需要，此div最好是另一个元素，例如
  ）

• 使用父对象上的

  text align:center

  将其居中

• 仅当子对象悬停时，才将文本颜色更改为橙色：

  .myDiv .subDiv:hover {
     color: #ffa609;
  }
  

然后在父div悬停时更改其边框颜色。悬停其任何子元素将保持悬停状态：

.myDiv:hover {
   border: 5px solid rgba(255, 166, 9, 1);
}

完整示例 注意转换是如何在

.myDiv

上进行的，它的子级继承与

转换：继承

相同的行为

.myDiv{
宽度：200px；
高度：20px；
边框：5px实心rgba（255,166,9,0.1）；
过渡：所有1；
文本对齐：居中；
过渡：所有1；
}
.subDiv{
文字装饰：下划线；
光标：指针；
显示：内联；
过渡：继承；
}
.myDiv.subDiv:悬停{
颜色：#ffa609；
}
.myDiv:悬停{
边框：5px实心rgba（255、166、9、1）；
}

盘旋我

是否有一个解决方案可以将它们与一个悬停组合在一起？新版本不如前一版本。因为我想在只悬停文本时更改颜色。

subDiv

是全块，宽度

为
200px
，当您悬停在任何位置时，它将更改文本颜色可能重复的