HTML/CSS/jQuery Sub Menu With Rotating Images

Question

I am trying to create a sub menu where when you hover over an li tag a related image is displayed.

Here is a picture:

To see it in action, kindly visit jetsetter.com and hover over Editor's Pick or Magazine.

My HTML is as follows:

<ul class="sub-menu">
    <div class="clearfix">
        <div class="menu-images one-third first">
            <div class="image-holder">
            <a href="#" class="menu-pic p1"><img src="#" /></a>
            <a href="#" class="menu-pic p2"><img src="#" /></a>
            <a href="#" class="menu-pic p3"><img src="#" /></a>
            <a href="#" class="menu-pic p4"><img src="#" /></a>
            </div>
        </div>
        <div class="menu-links two-thirds">
            <li class="menu-item m1"><a href="#">Gstaad</a></li>
            <li class="menu-item m2"><a href="#">St. Moritz</a></li>
            <li class="menu-item m3"><a href="#">Crans Montana</a></li>
            <li class="menu-item m4"><a href="#">Verbier</a></li>
        </div>
    </div>
</ul>

My jQuery is as follows:

   $(".m1").hover(function () {
        $(".p1").css("display", "inline");
    });
    $(".m1").mouseleave(function () {
        $(".p1").css("display", "none");
    });

    $(".m2").hover(function () {
        $(".p2").css("display", "inline");
    });
    $(".m2").mouseleave(function () {
        $(".p2").css("display", "none");
    });

    $(".m3").hover(function () {
        $(".p3").css("display", "inline");
    });
    $(".m3").mouseleave(function () {
        $(".p3").css("display", "none");
    });

And my CSS:

.menu-pic {
display: none;
}

Below is a picture of my problem:

My Question:
1] How can I set the first image to display without hovering over the respective li tag? And when I hover another li tag, another image is displayed.

Looking forward to your input (much appreciated).

Answer 1

One option using some css and the toggleClass() method is to add/remove a display class. We can then use the ~ , this is the General sibling combinator (http://www.w3.org/TR/selectors/#general-sibling-combinators), in the css to hide a default image when another image is being displayed

 $(".m1").hover(function () {
     $(".p1").toggleClass("display");
 });


 $(".m2").hover(function () {
     $(".p2").toggleClass("display");
 });


 $(".m3").hover(function () {
     $(".p3").toggleClass("display");
 });

 $(".m4").hover(function () {
     $(".p4").toggleClass("display");
 });

.menu-pic {
    display:none;
}
.menu-pic.default {
    display:inline;
}
.menu-pic.display {
    display:inline;
}
 /* this is saying for any .menu-pic.default look at it's preceding siblings, if any have .menu-pic.display then set display on .menu-pic.default to none*/
.menu-pic.display ~ .menu-pic.default {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
    <div class="clearfix">
        <div class="menu-images one-third first">
            <div class="image-holder"> 
              <a href="#" class="menu-pic p1"><img src="http://lorempixel.com/200/300?2" /></a>
 <a href="#" class="menu-pic p2"><img src="http://lorempixel.com/200/300?3" /></a>
 <a href="#" class="menu-pic p3"><img src="http://lorempixel.com/200/300?4" /></a>
 <a href="#" class="menu-pic p4"><img src="http://lorempixel.com/200/300?5" /></a>
<!-- added a default image to display-->
 <a href="#" class="menu-pic default"><img src="http://lorempixel.com/200/300?1" /></a>

            </div>
        </div>
        <div class="menu-links two-thirds">
            <li class="menu-item m1"><a href="#">Gstaad</a>

            </li>
            <li class="menu-item m2"><a href="#">St. Moritz</a>

            </li>
            <li class="menu-item m3"><a href="#">Crans Montana</a>

            </li>
            <li class="menu-item m4"><a href="#">Verbier</a>

            </li>
        </div>
    </div>
</ul>