Question

我想为自己的网站制作一个三角形导航栏。但是当我试图将鼠标悬停在一些div上时，出现了一些问题：三角形图像的背景仍然是正方形，所以当我将两个三角形图像放在彼此旁边并将鼠标悬停在它们上面时，我无法单独选择它们。所以我的问题是如何确保只悬停在图像上而不是＆＃34;背景＆＃34;格。

制作一张小图片让你们明白我的意思： http://www.mupload.nl/img/fgvvsqzjoxl.png（我的鼠标位于第二张图片上，悬停效果使不透明度降低）

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

Answer 1

<强> Demo

诀窍是在悬停时应用边框（就像我们用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>

CSS

.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;
}

三角导航。酒吧

1 个答案: