创建具有许多 div 的按钮时出现问题答案

【问题标题】：problem while creating button with many divs创建具有许多 div 的按钮时出现问题
【发布时间】：2011-10-29 14:48:49
【问题描述】：

这是我正在尝试构建的菜单。现在我很困惑，不知道怎么做。

一个 div（蓝色箭头）需要负边距才能在框外，另一个 div 用于蓝色按钮背景，在按钮内部需要两个 div 或 span 用于文本颜色。但在悬停时，它们需要看起来相同（白色）。

我已经尝试了很多次来构建它，但我失败了。我在加载时遇到了一些错误。也许它需要任何 jquery 代码，但我对它很陌生，我不知道该怎么做。

我在本地工作，无法提供任何链接来展示它，但有一张我想要制作的图片。

希望你能理解我，因为我的英语不好。

【问题讨论】：

用您当前的代码创建一个fiddle，以便我们处理它，因为您的解释不是很清楚。
您可以在 www.jsfiddle.net 上做一个示例，以便我们查看您的代码。
可悲的是，jsfiddle seems to be down。整个上午都在困扰着我。
@Wesley Murch：对我来说有点问题。可能我的一半答案都有链接..
这正是问题/答案应该始终包含完整代码的原因，而不仅仅是指向演示的链接。

标签： jquery html css button menu

【解决方案1】：

见：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>

【讨论】：

太棒了！这是一些铁杆的承诺！您实际上也在 css 中创建了箭头.. 哇！（而且我不容易留下深刻印象！）非常尊重这个答案！
是的，我印象深刻！但我需要箭头是图像并支持除 ie6 之外的所有浏览器。那么还有其他方法可以做到这一点吗？对于 Kokos 的回答，您认为我可以用该代码执行此操作吗？
+1 用于带有计数器的 content 属性。真的很整洁的功能！非常感谢！
@user713190：我将更新我的答案以使用 IE7，但是 IE7 不支持我使用的很多东西。它会比现在优雅得多。
@thirtydot：非常感谢你帮助我，我正在等待你的更新。

【解决方案2】：

您似乎很清楚自己想做什么。如果我理解正确，您的问题是悬停时一切都变白了。

应该有一个包含所有其他 div 的 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;
}

【讨论】：