Question

我有一个<ul>项，在悬停时变大（带动画）。现在我已将它们放在屏幕的右侧（使用right:0em类的CSS <li>，并且我已将h <li>的位置设置为固定所以只有它会随着它的增长而向左移动，并且遗骸中的所有对象都会保持在右边。问题是，因此，当我将鼠标悬停在它上面时，下一个项目会“低于”它。我怎么能改变呢？（可能有一种方法只能控制悬停时<li>的水平位置属性吗？）

代码：

http://jsfiddle.net/KBprd/2/

Answer 1

没有任何代码可以启动它有点难以帮助。但根据我可以收集的内容，您希望所有项目与菜单右侧保持齐平;只有“悬停”元素从容器的右侧移开。我打了一个如何做到这一点的例子。如果这不是您想要的，请在评论中提供更多代码或详细信息，我们可以从那里开始......

Here is the updated Fiddle

CSS：

.navigation{
    position:fixed;
    z-index:1;
    top:3em;
    right:0em;

}
.navigation li.slide{
    color:#000000;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:light;
    background:#00C9FF;
    -webkit-transition: all .2s ease-in-out;
    text-align:right;
    width:53px;
    float:right;

}
.navigation li:hover,.active{
    font-size:25px;
    cursor:pointer;
    width:100px!important;
    background:#5C0CE8;
}
.navigationClear {
    clear:both;
    height:1px;
     margin-bottom:-1px;  
}

HTML：

<ul class="navigation">
        <li data-slide="1" class="slide">Slide 1</li>
        <li class="navigationClear"></li>
        <li data-slide="2" class="slide">Slide 2</li>
        <li class="navigationClear"></li>
        <li data-slide="3" class="slide">Slide 3</li>
        <li class="navigationClear"></li>
        <li data-slide="4" class="slide">Slide 4</li>
        <li class="navigationClear"></li>
</ul>

Answer 2

你的悬停元素隐藏下面元素的原因是因为你已经给悬停元素赋予了“position：fixed”。我通过给ul元素一个宽度来修复你的问题，以便li元素不会排成一行。我还删除了悬停元素的固定位置。然后右边漂浮了李。这样你也不需要在每个元素后面加上“clearNavigation”。

这是你的小提琴代码。

<ul class="navigation">
    <li data-slide="1">Slide 1</li>
    <li data-slide="2">Slide 2</li>
    <li data-slide="3">Slide 3</li>
    <li data-slide="4">Slide 4</li>

.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
width:53px;
} 

.navigation li{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
position:relative;
right:0em;
float:right;
}

.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
right:0em;
}

水平控制列表项的位置

2 个答案: