滑動菜單選項卡

我有一個客戶的請求，當有人將鼠標懸停在菜單選項卡上時，菜單選項卡將滑動。滑動菜單選項卡

至於現在我有一個li.active卷和一個li：懸停卷。

我不知道如何定義滾動，在懸停非活動菜單選項卡時，活動人員會相應地更改樣式。

這有可能嗎？

2014-04-16 theguy

幻燈片如何，在何處？也許你可以向我們展示當前的HTML和CSS，並同時製作一個JSFiddle。 –

這裏發佈的例子非常接近，我只需要一個懸停效果，這個效果不是像展示的那樣滑動而是拖曳。看到我對其他答案的評論。 – theguy

我發現這個職位 - > http://stackoverflow.com/questions/11603980/hover-effect-on-another-class-in-css這是我所需要的，但它不適合我。試過這個：＃sp-main-menu ul.level-0> li：hover> a＃sp-main-menu ul.level-0> li.active> a background：transparent！important; \t} – theguy

這樣的事情？ @theguy

HTML

<ul class="menu"> 
    <li><a href="#" class="active">Option1</a></li> 
    <li><a href="#">Option2</a></li> 
    <li><a href="#">Option3</a></li> 
    <li><a href="#">Option4</a></li> 
    <li class="slider"></li> 
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans); 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, 
body { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: 'PT Sans', Arial, Verdana; 
    background-color: #eee; 
} 
h1 { 
    text-align: center; 
    font-size: 48px; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    color: #222; 
} 
.menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 120px; 
    margin: auto; 
    position: relative; 
    background-color: #2c3e50; 
    z-index: 7; 
} 
.menu li { 
    float: left; 
    width: 25%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.menu a { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    height: 100%; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    color: #fff; 
    text-decoration: none; 
    position: relative; 
    font-size: 18px; 
    z-index: 9; 
} 
a.active { 
    background-color: #e74c3c; 
    pointer-events: none; 
} 
li.slider { 
    width: 25%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-color: #e74c3c; 
    z-index: 8; 
    -webkit-transition: left 0.4s, background-color 0.4s; 
    transition: left 0.4s, background-color 0.4s; 
} 
.menu li:nth-child(1):hover ~ .slider, 
.menu li:nth-child(1):focus ~ .slider, 
.menu li:nth-child(1):active ~ .slider { 
    left: 0; 
    background-color: #3498db; 
} 
.menu li:nth-child(2):hover ~ .slider, 
.menu li:nth-child(2):focus ~ .slider, 
.menu li:nth-child(2):active ~ .slider { 
    left: 25%; 
    background-color: purple; 
} 
.menu li:nth-child(3):hover ~ .slider, 
.menu li:nth-child(3):focus ~ .slider, 
.menu li:nth-child(3):active ~ .slider { 
    left: 50%; 
    background-color: #e67e22; 
} 
.menu li:nth-child(4):hover ~ .slider, 
.menu li:nth-child(4):focus ~ .slider, 
.menu li:nth-child(4):active ~ .slider { 
    left: 75%; 
    background-color: #16a085; 
}

在這裏，你是的jsfiddle：http://jsfiddle.net/luiggi/Ugyh8/

來源

2014-04-16 11:39:25 Luiggi

謝謝分配。這與我所需要的非常接近。唯一的問題是客戶要求整箱搬家。在此演示中，選項卡滑過，但活動項目仍被標記。所以你有兩個懸停盒。我需要只有一個在懸停時滑動。 – theguy

我實際需要知道的是如何在其他li標籤上方懸停時移除li.active標籤樣式？ – theguy

我覺得我很接近，但還沒有。嘗試了這一點，但它並沒有工作：＃sp-main-menu ul.level-0> li：hover＃sp-main-menu ul.level-0> li.active {0} 0％0％0％背景：transparent！important; } – theguy

滑動菜單選項卡

回答

相關問題