Html 三角导航。酒吧

我想为我自己的网站做一个三角形的导航条。 但当我试图在一些div上悬停时，出现了一些问题： 三角形图像的背景仍然是正方形，因此当我将两个三角形图像相邻放置并将鼠标悬停在它们上方时，我无法单独选择它们。 因此，我的问题是如何确保只将鼠标悬停在图像上，而不是“background”div

拍了一张小照片，让你们明白我的意思： （我的鼠标位于第二幅图像上，悬停效果使不透明度降低）

我非常感谢您能提供的任何帮助。

诀窍是在悬停上应用边框（就像我们用css创建三角形时所做的那样）

html

---

你能发布相关的代码吗？这对你有帮助吗？它不是三角形的，但很容易适应。谢谢你的回答！但是问题仍然存在，看看这张图片：红色的圆圈是鼠标，所以当我还在第一个三角形上时，第二个三角形已经被选中了，不应该是这样。

<div class="tri-wrap">
    <div class="triangle up">
        <div class="tri-text-up">design</div>
    </div>
    <div class="triangle down negativeM">
        <div class="tri-text-down">hand
            <br />made</div>
    </div>
    <div class="triangle up last negativeM">
        <div class="tri-text-up txt-pad">illustration</div>
    </div>
</div>

.tri-wrap {
    margin: 1em auto;
    width: 600px;
}
.triangle {
    float: left;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}
.down {
    border-top: 120px solid #ee8172;
}
.up {
    border-bottom: 120px solid #11b9a6;
}
.down:hover {
    border-top: 120px solid #f2a698;
    cursor: pointer;
}
.down:hover:hover > .tri-text-down {
    display: block;
    color: black;
    font-family:"Century Gothic";
    text-transform: uppercase;
}
.up:hover {
    border-bottom: 120px solid #97c6c7;
    cursor: pointer;
}
.up:hover:hover > .tri-text-up {
    display: block;
    color: black;
    font-family:"Century Gothic";
    text-transform: uppercase;
}
.tri-text-down {
    margin: -6em -1.4em;
    color: black;
    display: none;
}
.tri-text-up {
    margin: 4.1em -1.75em;
    color: black;
    display: none;
}
.txt-pad {
    margin: 4.1em -3.1em;
    color: black;
    display: none;
}
.negativeM {
    margin-left: -5em;
}
.last {
    border-bottom: 120px solid #8393c9;
}
.last:hover {
    border-bottom: 120px solid #c0b1d6;
    color: black;
}