how to have css affect other divs in the same container


Tags: html,css

Problem :

I am trying to have one list affect another list... I have made an example fiddle to try to get this figured out.. I am just stuck!

Basically I have a list of items and a list of images. I would like to have a different image display as each item is highlighted. Here is my fiddle mock-up: http://jsfiddle.net/t9hznk0w/

Basically Container is the main div... then there is the list of items and then another place-holder list for the images. In this example I am simply trying to proof of concept (I will later do it by changing the opacity) but I cannot seem to get the first list items to affect the second list items when hovered. In my example I am simply trying to change the color and bold the second element.

Please any help with this would be greatly appreciated!

HTML:

<div id="container">
    <ul id="container1">
        <li class="itm1">Item 1</li>
        <li class="itm2">Item 2</li>
        <li class="itm3">Item 3</li>
    </ul>
    <ul id="container2">
        <li class="img1">ITEM 1 IMAGE</li>
        <li class="img2">ITEM 2 IMAGE</li>
        <li class="img3">ITEM 3 IMAGE</li>
    </ul>
</div>

CSS:

.itm1:hover ~ .img1 {
font-weight: bold;
color: red;
}
.img1:hover {
color: green;
}
.itm1:hover {
color: yellow;
}

I have tried + > ~ and various combinations still no success... please help!



Solution :

Since you requested only HTML and CSS, I changed the markup in order to obtain what you intend. The lack of parent selector in CSS turn your request impossible for that markup.

.itm1:hover ~ .img1 {
    color: red;
}
.itm2:hover ~ .img2 {
    color: red;
}
.itm3:hover ~ .img3 {
    color: red;
}
.img1:hover {
    color: green;
}
#container ul li:hover {
    color: red
}
<div id="container">
    <ul id="container1">
        <li class="itm1">Item 1</li>
        <li class="itm2">Item 2</li>
        <li class="itm3">Item 3</li>
        <br/>
        <li class="img1 container2">THIS IS ITEM 1</li>
        <li class="img2 container2">THIS IS ITEM 2</li>
        <li class="img3 container2">THIS IS ITEM 3</li>
    </ul>
</div>

This is a HTML and CSS only solution, not sure it fits into your requirements.

Fiddle


    CSS Howto..

    Rails - how to place text onto an image within a code loop

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    Cakephp how to remove underline on links

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How can I center a div within another div?

    How to implement min left/right in css

    Wordpress Menus are not showing up correctly?

    Make image show when screen reaches a certain width (pixels)

    How To Create SubMenu in Drop Down (HTML/CSS)

    how can i style processing.js element?

    How to keep line breaks when using .text() method for jQuery?

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    how to: dynamically switch css page

    How to make this CSS compatible with IE browsers? [closed]

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    How can I write the javascript script to modify this css file?

    How do I stop the text from moving when hovered? (background-image is involved)

    How to detect MAC OS' inverted color mode in javascript / css?

    How to hide a div with jquery or alternative?

    How to use icon images?

    Image Filter and Show text on Mouseover

    HTML+CSS: How to add arrow to horizontal menu items?

    How to align elements so CSS fixed doesnt overlap on page load

    How to align text and images on one line and position those to the left and/or right?

    How to use css in asp.net

    How to add new table rows and columns with table headers to css table

    How can I animate the drawing of text on a web page?

    CSS: how to calculate margin inside a div for a fluid layout

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to overlay divs with pure css?