问题有许多的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

回答

相关问题