css how to select a class in another div

Question

I am trying to make a menu where I show the icon and when i hover over the icon the text will appear. I've got that so far, but I want to change the background color of the text.

<div id='menu'>
    <div id='menuitems'>
        <div class="item" onclick="loadPage('/')">
            <span class="menuIcon"><img src='/img/layout/icons/home.png'/></span>
        </div>
        <div class="item" onclick="loadPage('/pages/settings/')">
            <span class="menuIcon"><img src='/img/layout/icons/settings.png' /></span>
        </div>
        <div class="item" onclick="loadPage('/pages/php/')">
            <span class='TextMenuItem'>< &#47; ></span>
        </div>
    </div>
    <div id="menuText">
        <div class="itemtext" onclick="loadPage('/pages/home/')">Home</div>
        <div class="itemtext" onclick="loadPage('/pages/settings/')">Settings</div>
        <div class="itemtext" onclick="loadPage('/pages/php/')">Projects</div>
    </div>
</div>

So if I move over a div with the class item I want to change the color of the div and the div with the class itemtext. Is it possible, in css, to see how many times a class has been used before the one that I hover and based on that number being able to color the background of the itemtext div with the same number or do I have to use javascript?

JSFiddle with progress: http://jsfiddle.net/WszKV/

take a look at this http://stackoverflow.com/a/6910112/1061567 — zdesam, Dec 07 '13 at 15:36

score 0 · Answer 1 · answered Dec 07 '13 at 16:11

0

I think

.item:hover .itemtext:hover{
  color: <new color>;
  background-color: <new color>;//if that is what you were looking for
}

should work.

answered Dec 07 '13 at 16:11

Aneesh

279
3
11

when I use your code `itemtext` has to be a `child element` of `item` which is not the case. – Gert Kommer Dec 11 '13 at 19:59
but I don't know which child I have. So I can not bind it to a child of the other div... – Gert Kommer Dec 18 '13 at 22:13

score 0 · Accepted Answer · answered Jan 20 '14 at 13:17

Ended up using javascript to solve my problem.

$('.item').hover(
    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
    }
)
$('.itemtext').hover(
    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
    }
)
function changeMenuBg(index, hover){
    if(hover){
        $($('.item').get(index)).css('background-color','#FF2400');
        $($('.itemtext').get(index)).css('background-color','#FF2400');
    }
    else{
        $($('.item').get(index)).css('background-color','');
        $($('.itemtext').get(index)).css('background-color','');
    }
}

css how to select a class in another div

2 Answers2