我正在使用text-overflow
制作一些面包屑并限制它们的宽度,因此文本不会溢出。我编写了一个jQuery脚本,当用户将鼠标悬停在它上面时,它会扩大面包屑的大小。
我的问题是,当面包屑被放大时,它们的长度太长而无法放入容器内。我需要使其他面包屑的宽度更小,同时使突出显示的面包屑更长。
我为此编写了一个脚本,但它非常错误。原因是当其他面包屑的尺寸缩小时,突出显示的面包屑的位置会移动。
我希望突出显示的痕迹导线尺寸向外扩展,以便它保持在相同的位置。但它周围的面包屑尺寸缩小,以便能够适应所有东西。
这可以吗?
这是我到目前为止的一个小提琴 - http://jsfiddle.net/8FPeS/
这是我的jQuery代码:
$('.breadcrumbButton').mouseenter(function(){
$('.breadcrumbButton').css({width:'30px', minWidth:'30px'});
$(this).css({width:'auto', minWidth:'80px'});
});
$('.breadcrumbButton').mouseleave(function(){
$('.breadcrumbButton').css({width:'80px', minWidth:'80px'});
$(this).css({width:'80px'});
});
答案 0 :(得分:1)
我已从头开始对其进行重新编码,希望能够将其用于Codepen / JSFiddle
<强> HTML 强>
<ul id="container">
<li><a href="#">Network Accessories</a>
<li><a href="#">DYMO</a>
<li><a href="#">Labelling Solutions</a>
<li><a href="#">Labelling Solutions</a>
<li><a href="#">Sound Proof Data Cabinets & Server Racks</a>
<li><a href="#">Labelling Solutions</a>
<li class='active'><a href="#">Dymo Flexible Nylon</a>
</ul>
<强> CSS 强>
body {
font-family: 'Tahoma', sans-serif;
font-weight: bold;
}
#container {
width: 735px;
border: 1px solid red;
padding-top: 10px;
padding-bottom: 10px;
float: left;
list-style: none;
margin: 0;
}
#container li:first-child {
margin-left: -20px;
}
#container li {
margin-right: 22px;
background: #eee;
border-right: none;
text-decoration: underline;
padding: 10px 5px;
float: left;
height: 16px;
position: relative;
}
li:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 17px 17px;
border-color: transparent transparent transparent #eee;
position: absolute;
top: 0px;
right: -17px;
}
li:before {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: #eee #eee #eee transparent;
position: absolute;
top: 0;
left: -18px;
}
#container li a {
font-size: 11px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
overflow: hidden;
display: block;
max-width: 30px;
line-height: 15px;
text-align: center;
}
.active {
background: #333365 !important;
}
.active:before {
border-color: #333365 #333365 #333365 transparent;
}
.active:after {
border-color: transparent transparent transparent #333365;
}
.active a {
max-width: 1000px;
color: #fff !important;
}
.hover {
max-width: 1000px !important;
}
<强> JS 强>
$('li').mouseenter(function(){
$('.active a').css('max-width', '40px');
$(this).children('a').addClass('hover');
});
$('li').mouseleave(function(){
$(this).children('a').removeClass('hover');
$('.active a').css('max-width', '1000px');
});
希望这有帮助!