Display a from a different when I hover on a from another

Question

I'm trying to display a li when an another li from a different ul is hovered , but i didn't have success until now.Can you help me ? Thank you !

HTML

<div id="parent">
    <ul id="child1">
        <li id="child1a">bla bla</li>
        <li id="child1b">bla bla</li>
        <li id="child1c">bla bla</li>
        <li id="child1d">bla bla</li>
    </ul>
    <ul id="child2">
        <li id="child2a">bla bla</li>
        <li id="child2b">bla bla</li>
        <li id="child2c">bla bla</li>
        <li id="child2d">bla bla</li>
    </ul>
</div>

CSS

#child2a {display:none;}
#child1a:hover #child2a {display:block}

https://jsfiddle.net/t9y4wu61/

Answer 1

You will need more than just CSS to solve this. But first of all, your approach contains a logical mistake:

#child1a:hover #child2a {display:block}

Adding a space between selectors means that they are nested in the markup. So your CSS would work just fine for something like this:

<div id="parent">
    <ul id="child1">
        <li id="child1a">
            <span id="child2a">bla bla</span>
        </li>
    </ul>
</div>

But of course, this is not what you want. To get things working, you will need JavaScript. I recommend jQuery for this:

$(document).ready(function() {
    $("#child1a").mouseover(function() {
        $("#child2a").show();
    };
    $("#child1a").mouseoout(function() {
        $("#child2a").hide();
    };
}

Please note that I did not test this code, so it might have some issues. However it might lead you into the right direction. See the linked jQuery website for reference and code examples.