Question

screenshot

这是我正在尝试构建的菜单。现在我很困惑，无法弄清楚如何制作它。

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

我已多次尝试构建它，但我失败了。加载时我遇到了一些错误。也许它需要任何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;
}

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

2 个答案: