Geek Answers Handbook

Problem creating a button with many divs

screenshot

This is the menu I'm trying to create. Now I am confused and cannot figure out how to do this.

One div (blue arrow) needs a negative margin to go out of bounds, another div for the background of the blue button and inside the button two other divs or covers the colors of the text. But on hover, they should look the same (white).

I tried to create it many times, but I could not. I get some errors while loading. Maybe he needs some kind of jquery code, but I'm very new to this, and I have no idea what to do.

I work locally and I can’t give a link to show it, but there is an image of what I want to do.

I hope you understand me, because my English is not very good.

+5
2

: http://jsbin.com/ihugut

, IE8 + ( IE7).

( edit: , 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 defiled:

<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>
+3

, , . , , .

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;
}
+2

More articles:


All Articles