我正在尝试复制在以下 fiddle 上看到的效果:http://jsfiddle.net/7studio/wQQCP/
基本上它是一个水平列表,带有一个线标记,当鼠标悬停在元素上时会四处移动。
这是我尝试复制它的尝试:http://jsfiddle.net/yt24oj2w/
在新页面(使用 Bootstrap 布局)上,我创建了一个类似的列表:
<div class="container">
<div class="row">
<div class="col-md-8">
<h3>Options</h3>
<hr/>
<div class="options">
<ul class="list-inline pull-left">
<li class="n1"><a href="#">Items</a></li>
<li class="n2"><a href="#">Newest</a></li>
<li class="n3 selected"><a href="#">Oldest</a></li>
<li class="quebec"> </li>
</ul>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
CSS 和原来的一模一样:
a { color: #7c7c7c; }
a:hover, a:focus { text-decoration: none; }
ul { position: relative; overflow: hidden; zoom: 1; }
li {
list-style: none outside;
position: relative;
z-index: 1;
float: left;
border-bottom: 5px solid #ececec;
padding: 0 20px 0 0;
}
li a {
position: relative;
top: 5px;
display: block;
margin: -5px 0 0;
border-bottom: 5px solid transparent;
padding: 10px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.n1 { width: 110px; }
.n2 { width: 110px; }
.n3 {
width: 110px;
padding-right: 0 !important;
}
.selected a {
border-bottom-color: #cfd0d0;
color: #340e56;
}
.quebec {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
margin: 0;
border: 0;
width: 5px;
height: 5px;
padding: 0;
overflow: hidden;
text-indent: -9999em;
background: #511d7f;
-webkit-transition-property: left, width;
-moz-transition-property: left, width;
-ms-transition-property: left, width;
-o-transition-property: left, width;
transition-property: left, width;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
pointer-events: none;
}
li:hover {
left: -20px;
z-index: 2;
margin-right: -20px;
padding: 0 20px;
}
.n1:hover ~ li.quebec { left: 0; width: 110px; }
.n2:hover ~ li.quebec { left: 130px; width: 110px; }
.n3:hover ~ li.quebec { left: 260px; width: 110px; }
但是,将鼠标悬停在列表上时,您会看到列表项的位置向左移动。
我知道我没有为悬停类使用正确的宽度和左侧值,但这只是为了测试。
让我感到困惑的是,元素(或其中的链接)在悬停时会改变位置。我已经尝试从头开始创建这个示例,但没有任何运气。
我很感激任何帮助解决这个问题的人,因为我使用的是完全相同的 CSS。唯一的区别是 Bootstrap 类。
此外,正如我在上面指出的那样,我无法弄清楚 li 或 a 是否在改变位置。如果您能告诉我如何算出那个,我将不胜感激,以供将来引用。
提前致谢。
最佳答案
是你的 li:hover
导致了问题,还有一些 bootstrap css,你需要添加一些 css 来撤销 bootstrap 所做的更改。
改变这些:
.n3 {
width: 110px;
padding-right: 0 !important;
padding-left: 0 !important;
}
li:hover {
left: 0px;
z-index: 2;
margin-right: 0px;
padding: 0;
}
为了将来检查您的代码,您可以使用 chrome 或 firefox 右键单击该页面并选择检查元素,然后使用它来解决您的代码问题。
关于css - 我如何修复此 CSS 定位以使过渡正常工作? (带有 Bootstrap 的 CSS3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28934636/