我正在尝试复制在以下小提琴上看到的效果: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。唯一的区别是引导类。
另外,正如我上面指出的,我无法弄清楚是li还是变化的位置。如果您能告诉我如何弄清楚这一点以供将来参考,我将不胜感激。
提前谢谢。
是你的li:hover
导致了这个问题,还有一些你需要添加一些 css 来撤消引导程序所做的更改的引导 css。
改变这些:
.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,您可以右键单击页面并选择检查元素,然后使用它来对代码进行故障排除。