Question

我有一个由4个div组成的菜单，每个div包含一个图像和一个文本。我想通过更改（http://jsfiddle.net/celiostat/mnQ9g/1/）：

向用户指明哪个页面是actvie

图像颜色（显然我有两种颜色的图像）
文字颜色
div颜色背景

我不得不说，由于所有3个元素的变化，我无法找到答案！

HTML：

    <nav class="fouritemselector_menubar container">
    <div class="item_unselected">
        <img class="item_icon_in_menubar" src="http://files.softicons.com/download/system-icons/rhon-icons-by-harenome-razanajato/png/512x512/folder-blue.png">
        <span class="item_text_in_menubar">all</span>
    </div>
    <div class="item_unselected">
        <img class="item_icon_in_menubar" src="http://www.mouserunner.com/Icons/Orb_Blue_Preview_Icon.png">
        <span class="item_text_in_menubar">story</span>
    </div>
    <div class="item_unselected">
        <img class="item_icon_in_menubar" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Misc-Buddy-Blue-icon.png">
        <span class="item_text_in_menubar">dish</span>
    </div>
    <div class="item_unselected">
        <img class="item_icon_in_menubar" src="http://icons.iconarchive.com/icons/hopstarter/scrap/256/Folder-Closed-Blue-icon.png">
        <span class="item_text_in_menubar">restaurant</span>
    </div>
</nav>

CSS：

.fouritemselector_menubar
{
height: auto;
display: table;
width: 100%;
margin: 0 auto;
margin-bottom: :10px;
}


.item_unselected
{
height: auto;
background-color: gray;
display: inline-block;
vertical-align: top;
width: 25%;
box-sizing: border-box;
border-right: 1px solid #ECF0F1;
}

.item_icon_in_menubar
{
display: block;
margin-left: auto;
margin-right: auto;
float: none;
position: relative;
overflow: auto;
width: 25%;
max-width: 60px;
padding-top: 12px;
}

.item_text_in_menubar
{
display: table;
margin: auto;
float: none;
font-size: 90%;
font-family: "Montserrat";
padding-top: 4px;
padding-bottom: 4px;
color: #AFAFAF;
 }

标题菜单属性（Div，图像和文本）在活动页面上更改值

0 个答案: