Css 使用：hover:after链接问题

在上面的这支笔中，我已经研究了一些伪元素，现在我已经不知所措了。我喜欢悬停时显示的浅蓝色三角形/播放按钮，但我不明白为什么当我特别悬停在三角形上时，红色高亮会消失。有没有一种简单的方法让这两个元素一起显示

下面是该特定：after元素的CSS

.container a:hover:after;
content: '\25b6';
font-size: 75px;
color: #7FDBFF;
position: absolute;
display: inline-block;
margin-left: -13%;
margin-top: 8.85%;
opacity: 0.7;
filter: alpha(opacity=7);

任何建议都将不胜感激

---

谢谢大家!

您有如下html元素：

<a><div></div></a>


+----------------------------------+
| 1 a:hover                        |
|    +--------------+              |
|    |  2 div:hover |              |
|    +--------------+              |
|                                  |
|                                  |
|                                  |
+----------------------------------+

div:hover:after{ } /*red background element*/

div:hover:after, a:hover div:after{}

现在，当您使用

a:hover:after{}

时，您将不再访问

div:hover

，因此您的红色元素将丢失

---

那么，您应该做的是将这个：

a:hover div:after

添加到您的

div:hover:after

中

<a><div></div></a>


+----------------------------------+
| 1 a:hover                        |
|    +--------------+              |
|    |  2 div:hover |              |
|    +--------------+              |
|                                  |
|                                  |
|                                  |
+----------------------------------+

div:hover:after{ } /*red background element*/

div:hover:after, a:hover div:after{}

现在，当您将鼠标悬停到

时，将显示
div:after
元素，这意味着您现在不会丢失
div:hover:after

让我们看看更新的
好吧，我在第74行更新了这段代码，以得到您想要的

.container .mix:hover:after, a:hover .mix:after{
  content: attr(data-myorder)
}

更新了
谢谢你这样画出来。非常感谢！！感谢您提供了一个简单的解决方案@brianm的解释在第二个答案中得到了很好的说明。不客气：）