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 class="item" onclick="loadPage('/pages/settings/')">
            <span class="menuIcon"><img src='/img/layout/icons/settings.png' /></span>
        <div class="item" onclick="loadPage('/pages/php/')">
            <span class='TextMenuItem'>< &#47; ></span>
    <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>

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.

    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
function changeMenuBg(index, hover){

    CSS Howto..

    How to set border between two products in css?

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to use a CSS sprite for a Repeating background image?

    how to apply the height css property on ie9 just?

    How to make gradually changing background in CSS become uninterruptible?

    How do I add keyboard bindings to carousel functionality? - jQuery

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    How can I correctly center this div into its container? What is wrong?

    Are where any examples available on how to use postcss-modules instead of css-modules?

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    How do I make a html page printable without reloading/refreshing the data?

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    how would i get the headline to fade in and move up very slightly on page load with css

    How to set border's thickness in percentages?

    How to combine this css?

    How do i select only one column when hovering over it in a drop down jQuery menu?

    How to make <'details'> drop down on mouse hover

    How to change the button color when it is active using bootstrap?

    How to have multiple CSS color transitions on a single text line?

    How to scroll a page or a element using css

    How can i create a div which contains two divs and stretch automatically

    How to change CSS when it's ng-disabled?

    How can I read a CSS property value using Javascript?

    How to override Zurb Foundation css properties using rails 3.1?

    How to auto adjust menus height according to container height

    How can I make a display:flex container expand horizontally with its wrapped contents?

    How to load all CSS and JS from one html file?

    How to select, focused textarea?

    How to set CSS class to Button control using Session value in design page

    How to align two anchor tags with text horizontally next to each other?