Question

问题：为什么当你使用边框技巧制作css形状时here是否会将元素的视觉效果移出其dom-box？

所以我在搜索时发现了这两个问题：

Can I use CSS hover on this complex irregular shaped link
Hovering on overlapping CSS3 shapes

但我认为这两个问题都没有解决（尽管如果我想改变我的html结构，我可能会使用第一个链接的答案。

示例图片说明：

enter image description here

这意味着当我将鼠标悬停在该元素的下半部分时，会突出显示该元素下方的元素。

据我所知，即使我有一个视觉上的钻石，盒子模型说它仍然是一个矩形，但为什么钻石不包含在那个矩形内？

有没有解决方法 - 使用css / markup - 还是我必须使用第一个链接的maping解决方案？

我的源代码包含任何人想要的：

<header class="navigation">
    <div class="nav">
        <ul class='master_nav'>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#" style="margin-left:-10px;">Resources</a></li>
            <li><a href="#">FAQs</a></li>
        </ul>
    </div>
</header>

.navigation li{
    height: 0;
    width: 0;
    margin: 10px 0;
    list-style: none;
    position: relative;
    border: 70px solid transparent;
    border-bottom: 90px solid #2B2B2B;
    display: block;
}
.navigation li:after{
    content: '';
    position: absolute;
    left: -70px; top: 90px;
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-top: 90px solid #2B2B2B;
}

.navigation li a{
    height: 25px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    color: #b7b7b7;
    position: absolute;
    top: 75px;
    left: -19px;
}

.navigation li:hover a{
    color: #010101;
}

Answer 1

我并非100％确定原因，但您可以通过制作<a>悬停目标并填充空间来解决这个问题：

.navigation li a{
    height:70px;
    width: 80px;
    display: block;
    text-decoration: none;
    color: #b7b7b7;
    position: absolute;
    top: 38px;
    left: -40px;
    padding-top: 40px;
    text-align: center;
    border: 1px solid yellow;  //just to see it.
}

.navigation a:hover{
    color: #010101;
}

这是一支工作笔http://codepen.io/willthemoor/pen/KpcLD/（已更新）

修改

完美排列可能需要一些试验和错误，但您可以使用transform属性来旋转和倾斜<a>以匹配形状。我更新了笔。

我必须添加一些偏斜以匹配钻石的形状，然后使用<span>内的<a>来排序更改。用文字歪斜，这样你就可以尝试在边框钻石的形状和你可以不用歪斜的形状之间找到一个愉快的媒介。

.navigation li{ height: 0; width: 0; margin: 10px 0; list-style: none; position: relative; border: 70px solid transparent; border-bottom: 90px solid #2B2B2B; display: block; /* position fix */ top: -90px; left: -19px; } .navigation li:before{ content: ''; position: absolute; left: -70px; top: 90px; width: 0; height: 0; border: 70px solid transparent; border-top: 90px solid #2B2B2B; } .navigation li a{ background-color: rgba(255, 0, 0, 0.3); color: #B7B7B7; display: block; height: 68px; left: -55px; padding-top: 40px; position: absolute; text-align: center; text-decoration: none; top: 34px; -webkit-transform:rotate(314deg); transform: rotate(314deg); width: 110px; } .skew li a { /* following lines it up better but hard to 'rewind it' on the span witout the text looking a little strange */ -webkit-transform: rotate(310deg) skewX(-11deg) skewY(-2deg); transform: rotate(310deg) skewX(-11deg) skewY(-2deg); height: 73px; left: -55px; width: 112px; } .navigation a:hover{ background-color: rgba(0,0,255,.3); color: #010101; } .navigation a > span { display: block; /* and reset the text*/ -webkit-transform: rotate(46deg); transform: rotate(46deg); } .skew a > span { -webkit-transform: rotate(45deg); transform: rotate(45deg); letter-spacing: .04em; } /* lis are actually covering each other on the bottoms. Adding this hacky bit makes the bottom of the diamond link work. Could use classes instead. */ .navigation li { z-index: 100; } .navigation li + li { z-index: 90; } .navigation li + li + li { z-index: 80; } .navigation li + li + li + li { z-index: 70; }

Css边框形状和使用悬停状态

1 个答案: