css how to select a class in another div


Tags: html,css

Problem :

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/



Solution :

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 Howto..

    jQuery - failed show/hide buttons

    CSS: How can I set image size relative to parent height?

    Images not showing up in correct spot [closed]

    how to change other element css when selected element has new class

    How does a CSS rule override another CSS rule?

    How to select ids which contain special characters?

    how to align button radio in css

    How to clip inside a box in css?

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to make flexbox grid images responsive

    How to Set Banner-Like Background Image With CSS

    How read(get) css style value of a server-side div in code behind(not set)?

    How to draw a guitar string using css?

    How to center an input tag in fieldset when using codeigniter?

    how to make a div transparent without affecting the child in CSS 3?

    How could i center unordered lists in a footer?

    How to prevent input elements from affecting a table's columns' widths?

    How to draw mobile device edge using CSS?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How can I style a disabled button in a Windows 8 JavaScript app?

    How do I properly inspect jquery and javascript using web developer tools?

    How to I have a within a
  • align to the right side of the
  • How to access css selector properties after getting access to selector

    How to deploy a jekyll site locally with css, js and background images included?

    How to style nested element that is styled by its parent already

    How to auto margin-left for the message bar

    CSS - How to avoid element content to be displayed on 2 lines

    how to put inline image css in ghost-blog?

    How to align TH Header with TD in TBody

    How to aligning icon on right side of the screen when the screen size is small