問題有許多的div

screenshot 問題有許多的div

創建按鈕，這是我試圖建立菜單。現在我很困惑，無法弄清楚如何製作它。

一個div（藍色箭頭）需要負邊距才能出現在框外，另一個div用於藍色按鈕背景，並且在按鈕內部需要另外兩個div或跨度爲文本顏色。但在懸停時，他們需要看起來相同（白色）。

我已經嘗試了很多次來建立它，但我失敗了。加載時會出現一些錯誤。也許它需要任何jQuery代碼，但我很新，並且我不知道該怎麼做。

我在當地工作，我不能給任何鏈接顯示它，但有一個我想要的圖像。

我希望你能理解我，因爲我的英語不好。

來源

2011-08-18 user713190

撥打[小提琴]（http://jsfiddle.net）與您現有的代碼，以便我們可以在它的工作，因爲你的解釋不是很清楚。 – Purag

你可以在www.jsfiddle.net上舉個例子，這樣我們就可以看到你的代碼。 – Kyle

可悲的是，jsfiddle [似乎是失望]（http://www.downforeveryoneorjustme.com/http://jsfiddle.net/）。整個上午都在爲我困擾。 –

參見：http://jsbin.com/ihugut

這適用於所有現代瀏覽器和IE8 +（它在IE7中合理降級）。

（編輯：原來，這必須在IE7完美，所以看到我的回答結束該解決方案）

你可能有一個問題是，因爲我的目標是保持儘可能簡單的HTML，CSS很複雜，因此可能很難做出改變。

HTML：

<ol id="menu"> 
    <li><a href="#">Ballina g</a></li> 
    <li><a href="#">Konferenca g</a></li> 
    <li><a href="#">Folesit g</a></li> 
</ol>

CSS：

body { 
    margin: 50px; 
    background: #aaa 
} 
#menu { 
    list-style: none; 
    counter-reset: num; 
    background: #444; 
    float: left; 
    margin: 0; 
    padding: 12px 0 0 0; 
    font: bold 19px sans-serif 
} 
#menu li { 
    margin: 0 0 12px 0; 
    float: left; 
    clear: both; 

} 
#menu a { 
    counter-increment: num; 
    padding: 3px 15px 3px 50px; 
    float: left; 
    position: relative; 
    color: #0cf; 
    text-decoration: none 
} 
#menu a:hover { 
    color: #fff 
} 
#menu a:before { 
    content: counter(num, decimal-leading-zero); 
    color: #ccc; 
    position: absolute; 
    left: 21px; 
    font-weight: normal 
} 
#menu a:hover:before { 
    color: #fff; 
} 
#menu li:hover { 
    background: #0cf; 
    margin-left: -5px; 
    margin-right: 5px 
} 
#menu li:hover a { 
    left: 5px 
} 
#menu a:hover:after { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    left: -15px; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 10px solid #0cf 
}

下面是在IE7的作品完全版本：http://jsbin.com/ihugut/3

的HTML必須是玷污：

<ol id="menu"> 
    <li><a href="#"><span>01</span>Ballina g<span class="arrow"></span></a></li> 
    <li><a href="#"><span>02</span>Konferenca g<span class="arrow"></span></a></li> 
    <li><a href="#"><span>03</span>Folesit g<span class="arrow"></span></a></li> 
</ol>

來源

2011-08-18 10:06:50 thirtydot

令人驚歎！這是一些硬核的承諾！你實際上也是在css中創建了箭頭。哇！（並且我不容易留下深刻的印象！）非常尊重這個答案！ –

對我印象深刻！但我需要箭頭才能成爲圖像，並支持除IE6以外的所有瀏覽器。那麼還有另一種方法來做到這一點？以及您對Kokos的答案有什麼想法，我可以使用該代碼來做到這一點嗎？ – user713190

對於* content *屬性與計數器+1。真正整潔的功能！非常感謝！ – TonioElGringo

看起來好像你已經掌握了你想要做的事情。如果我理解正確，你的問題就是懸停時變成白色的一切。

應該有一個包含所有其他的div，您可以在不使用Javascript的情況下更改其懸停的子項。

比如你有這樣的HTML：

<div class="parent"> 

    <span class="child_black">I'm black</span> 
    <span class="child_red">I'm red</span> 

</div>

您可以使用以下CSS到兩個孩子的顏色更改爲白色懸停：

.child_black { 
    color: #000; 
} 

.child_red { 
    color: #f00; 
} 

.parent:hover .child_black, .parent:hover .child_red { 
    color: #fff; 
}

http://jsfiddle.net/ptUkg/

你可以使用相同的技術來顯示和隱藏左側的藍色箭頭。

對於剛剛顏色這將工作過，但不是爲箭頭：
只是替代品的緣故，我不會推薦這

.parent:hover { 
    color: #fff !important; 
}

來源

2011-08-18 09:18:26 Kokos

問題有許多的div

回答

相關問題