Beginner CSS, how the < li> realize the mouse over the picture on the labe




It was designed to do, but the company did not end, only yourself to learn the code to achieve the effect of.

This design is the other colleagues to do, without good communication, in the pop-up menu that put a picture is good, hard for two days and finally achieve this effect, but was informed today is in the left 6 menu slide show different pictures. Faint, this is not.

The idea is to can be in the two grade <li> the realization of the corresponding picture slide show on the label?

I put the current code posted, because of learning, and in two days time, so mostly collage together, also let you laugh at me. I hope to get help!

<style type="text/css">
    #nav{
        width: 685px;
        height: 40px;
        padding-top: 6px;
        padding-left: 25px;
        margin:0px;
        background: url( );
        background-repeat: repeat-x;
        color:#ffffff;
    }
    #nav a{font-family:"Microsoft Yahei";font-size:14px; line-height: 1.5;color: #000; text-decoration: none;}
    #nav ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    #nav ul li{
        float: left;
        display: inline;
        margin: 0px;
    }
    #nav ul li a{
        display: block;
    }
    #nav ul li a:hover{
    }
    #a0:hover{
        background:url( ) no-repeat center 0;
    }
    #a1:hover{background:url( ) no-repeat center 0;}

    #linkone{width:67px;height:34px;}
    #linktwo{width: 87px;height: 34px;}


    #nav ul li ul{list-style: none;display:none;background: url( );border:1px solid #d7e6dd;border-top:none;border-right: none;width: 121px;height: 154px; position:absolute;padding:0px;margin:0px;overflow:hidden; }
    #nav ul li ul li{float:none;width:80px;height:36px;line-height: 36px;position:relative;left:20px;margin-bottom:30px;top: 13px;}
    #nav ul li ul li a{color: #006837; }
    #nav ul li ul li a:hover{color: #5b461d; }
    #nav ul li span {display:none;position:absolute;float:left;padding-top: 7px;margin-left: 122px;width: 165px;height: 147px;background:url( );background-position:-80px 0px; border:1px solid #d7e6dd;border-left: none;border-top: none;}
    #nav ul li:hover ul { display:block;}
    #nav ul li:hover span { display:block;}
    #nav ul li span a:hover{border: 1px solid #ffffff}


</style>

<div id="nav">
    <ul>
        <li id="linkone"><a  id="a1" href="#"><img src="http://1.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/b289f77a288459d7.png"></a></li>
        <li id="linktwo"><a id="a0" href="#"><img src="http://9.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/c81c8b82e7a4fc37.png"></a></li>
        <li id="linktwo"><a id="a0" ><img src="http://5.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/8da6ab8b7dd5f656.png"></a>

        

        <ul>
            <li>
               <a href="#">,   Facial care</a>
            </li>
          <li>
               <a href="#">,   Aromatherapy essential oils</a>
            </li>
            <li>
               <a href="#">,   Shampoo and conditioner</a>
            </li>
            <li>
               <a href="#">,   Body care</a>
            </li>
            <li>
               <a href="#">,   Beauty tools</a>
            </li>
            <li >
               <a href="#">,   Select the box</a>
            </li>  
        </ul>

        <span><a href="123333333"><img src="http://6.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/e7aa3e965d448031.jpg"></a></span>

    

        </li>

        <li id="linktwo"><a id="a0" href="#"><img src="http://1.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/c91fb5d8797f4062.png"></a></li>
        <li id="linktwo"><a id="a0" href="#"><img src="http://7.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/de2a8d0a1b648094.png"></a></li>
        <li id="linktwo"><a id="a0" href="#"><img src="http://1.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/08f91d23a8cbb54c.png"></a></li>
        <li id="linktwo"><a id="a0" href="#"><img src="http://9.pic20.dianzhanggui.net/33402_d26bb2700aa125eaa28db3f84cb441fc/20130816/cf64e70376e12256.png"></a></li>
    </ul>
</div>

Started by Kevin at November 11, 2016 - 7:37 PM

Your sofa, seeking expert, thank you~

Posted by Kevin at November 14, 2016 - 8:14 PM

 #a0:hover{
        background:url( ) no-repeat center 0;
    }
    #a1:hover{background:url( ) no-repeat center 0;}

This is to pull.

Posted by Fanny at November 24, 2016 - 8:56 PM

If the code, to achieve this effect, how to achieve? Specific ideas or not...
This is the background image, the above desired results should be the mouse over each link, showing a small map, the text on the left and the right images should be able to add links.

This is no way.

Posted by Kevin at November 25, 2016 - 9:30 PM

Is that ok? For the 6 <li> each plus the last ID, then the style which is similar to the
#liout1:hover #span1{display:block;}

When you move the mouse over the first Li, displays the first paragraph <span> <span> content, is to display a corresponding picture.
Then the following <li> turn down

However, whether can the very accurate positioning in the picture right fixed position display.?

Posted by Kevin at December 04, 2016 - 9:57 PM

<a herf="">Written words<span><img src="" /></span></a>

Then CSS:

a span{display:none;}
a:hover span{display:block;}

Posted by Hobart at December 12, 2016 - 10:49 PM

Thank you. I'll try~

Posted by Kevin at December 21, 2016 - 11:27 PM

What about the results of the LZ

Posted by Byron at December 31, 2016 - 11:36 PM