調整元素大小但保持集中

我正在製作一些麪包屑並使用text-overflow限制它們的寬度，所以文本不會溢出。我寫了一個jQuery腳本，當用戶將鼠標懸停在麪包屑上時，它可以擴大面包屑的大小。調整元素大小但保持集中

我的問題是，當面包屑被放大時，它們最終會長到容器內部。我需要使其他麪包屑的寬度變小，同時使突出顯示的麪包屑變長。

我已經爲此寫了一個腳本，但它很bug。原因是當其他麪包屑的尺寸縮小時，突出顯示的麪包屑的位置會移動。

我想突出顯示的麪包屑擴大大小向外，以便它保持在同一位置。但它周圍的麪包屑會縮小尺寸，以適應一切。

這是可行的嗎？

一個小提琴，這裏是我的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'}); 

});

來源

2014-01-31 Dan Johnson

如果你縮小了其他麪包屑，你所在的麪包屑不能留在同一個地方，除非你的意思是你想改變填充？還嗨。 – Albzi

嘿@BeatAlex是的，我想這是我想改變的填充。我剛剛找到了一個jQuery插件 - http://www.ajaxblender.com/script-sources/xbreadcrumbs/demo/第二個下來正是我想要的，但我寧願自己編碼比使用一個插件。任何想法如何運作？ –

我會嘗試鞭打一些東西，但首先我正在整理你的CSS。你有很多不必要的規則，你正在重新做大聲笑。 – Albzi

我從頭開始重新編碼它希望得到它的工作到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; 
}

$('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'); 
});

希望這有助於！

來源

2014-01-31 11:56:41 Albzi

Ty bby !!!!!!! <3 –

@DanielJohnson yw bbz xxx – Albzi

調整元素大小但保持集中

回答

相關問題