Question

我正在尝试为我的网站制作一个新菜单，并且我正在使用突出显示的转换。

但是我遇到了一些问题。例如，如果您突出显示Home，它会将所有元素推到右侧。但是，如果有2行，则不会将元素向下推。相反，它只是掩盖它。我怎样才能确保每个元素都拥有它自己的专用空间而不被推动也不会被屏蔽。

我尝试与内心亲戚制造绝对，但这不起作用。

HTML：

<ul> 
    <li> Home </li>
    <li> About </li>
    <li> FAQ </li>
    <li> Locations </li>
    <li> StackOverflow </li>
</ul>

CSS：

ul{
    list-style-type:none;
    position:absolute;
}


li{
    display:inline;
    transition: all 2s;
    width:0px;
    position:relative;
    margin-right:3em;
    padding-top:10px;
    padding-right:30px;
    padding-left:4px;
}

li:hover{
    background-color:red;
    border-right:20px solid black;
    border-bottom:20px solid black;
    border-bottom-right-radius:10px;
    border-top-left-radius:10px;
}

Answer 1

如果您希望边框增长，可以使用css3 box-shadow并将模糊设置为0而不是使用border来欺骗它，因为阴影不会导致元素本身增长。

li:hover{    
    background-color:red;
    box-shadow: 10px 10px 0 10px black;
    border-bottom-right-radius:10px;
    border-top-left-radius:10px;
}

（请注意，它可能是一个黑客，而不是解决问题的最正确的方法。虽然它有点用。）

可以通过将display设置为inline-block并设置margin-bottom来实现项目之间的垂直空间：

li{
    display:inline-block;
    margin-bottom:2em;

    transition: all 2s;
    position:relative;
    margin-right:3em;        
    padding-top:10px;
    padding-right:30px;
    padding-left:4px;
}

updated jsFiddle

Answer 2

您可以在非悬停状态下设置透明边框，如下所示：

li {
    display:inline;
    transition: all 2s;
    width:0px;
    position:relative;
    margin-right:3em;
    padding-top:10px;
    padding-right:30px;
    padding-left:4px;
    border-right:20px solid transparent;
    border-bottom:20px solid transparent;
}

<强> jsFiddle example

css过渡推动元素

2 个答案: