：before类的悬停效果无法按预期运行

Question

我已经实现了这样一个下拉菜单，它的顶部是三角形：

现在，当光标仅滑过三角形时，它看起来像这样：

但是，如果光标位于div上方，则两个对象的翻转效果都将触发如下：

当光标也移至三角形上方时，我希望触发两个元素的悬停效果。有人可以告诉我我在做什么错吗？

这是我的CSS：

.msg_archivedropdown {
    position: absolute;
    color: #fff;
    left: 40px;
    top:0%;
    background-color: #659DBD;
    z-index: 100;
    display:none;
    border-radius: 2px;
    border-top-left-radius: 0px;
    box-shadow: 1px 1px 1px #000000;  
}
.msg_archivedropdown:before {
    content:"";
    display: block;
    position:absolute;
    width:0;
    height:0;
    left:-7px;
    top:0px;
    border-top: 10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:7px solid #659DBD;
}
.msg_archivedropdown:hover::before {
    border-right:7px solid #fff;
    color: #659DBD;
}
.msg_optiondropdownpoint {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
}
.msg_optiondropdownpoint:hover {
    background-color: #fff;
    color: #659DBD;
}

Answer 1

只需使用渐变即可伪造左侧的空白区域。然后将:: before元素放置在父元素内。请记住，您需要将左侧的填充物加倍以完成视觉效果：

Codepen Demo

HTML：

<div class="parent-element">
    <p>
    I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.
    </p>
</div>

CSS：

.parent-element{
    background:deeppink;
    background: linear-gradient(to left, deeppink calc(100% - 16px), rgba(0,0,0,0) 10%);
    padding:16px;
    padding-left:32px;
    width:320px;
    border-radius:4px;
    color:white;
    position:relative;
    margin:48px auto;
}
.parent-element:hover{
    background: linear-gradient(to left, deepskyblue calc(100% - 16px), rgba(0,0,0,0)  10%);
}
.parent-element::before{
    content:'';
    display:block;
    position:absolute;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-right: 16px solid deeppink;
    top:calc(50% - 8px);
    left:0px;
}
.parent-element:hover::before{
    border-right: 16px solid deepskyblue;
    pointer-events:auto;
}