创建具有多个 div 的按钮时出现问题

Question

这是我正在尝试构建的菜单。现在我很困惑，不知道如何制作。

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

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

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

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

Answer 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>

Answer 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;
}