찾다

집  >  Q&A  >  본문

javascript - uc导航http://www.uc123.com/的右侧的菜单当鼠标移动到购物和点击后会变成黄色。怎么实现呢？

uc导航http://www.uc123.com/的右侧的菜单当鼠标移动到购物和点击后会变成黄色，是用一张图片进行移动的，但是怎么实现呢？

伊谢尔伦伊谢尔伦2906일 전1754

모든 응답(3)나는 대답할 것이다

  • ringa_lee

    ringa_lee2017-04-11 11:28:55

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <code>.elevator-img-wrapper {

        width: 34px;

        height: 34px;

        margin: 0 auto;

        margin-top: 8px;

        overflow: hidden;/*超出部分会被隐藏，所以默认橙黄色部分是被隐藏的*/

    }

     

    .elevator-category:hover .elevator-img-wrapper img {

        margin-left: -34px;/*强行让图左移一块，露出橙色部分*/

    }</code>

    理解了吧

    회신하다
    0
  • 阿神

    阿神2017-04-11 11:28:55

    有的是直接替换png图片，有的只是 icon 字体换个颜色而已。 用css：hover就可以实现

    회신하다
    0
  • 怪我咯

    怪我咯2017-04-11 11:28:55

    可以这样，先给一个白色有边框，当点击的时候把白色边框改成黄色。并且替换图片。

    可以，下面是代码。
    注：JQ要你自己引入jq的原始文件比如：<script src="js/jquery-1.11.1.min.js"></script>或是更高版本；

    你是要这样的效果吗？？？

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    <code><!DOCTYPE html>

    <html lang="en">

     

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script src="js/jquery-1.11.1.min.js"></script>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

             

            li {

                list-style: none;

            }

             

            #gps_left {

                position: absolute;

                width: 200px;

                height: 40px;

            }

             

            #gps_left li {

                float: left;

                background: #ccc;

                margin: 5px;

                width: 40px;

                height: 40px;

                font: 12px/20px '微软雅黑';

            }

             

            #box {

                width: 200px;

                height 300px;

                overflow: hidden;

                position: relative;

                left: 240px;

                top: 0;

            }

             

            #gps_right {

                position: relative;

                left: 0;

                top: 0;

                width: 1600px;

                height: 300px;

            }

             

            #gps_right li {

                float: left;

                width: 200px;

                height: 300px;

                font: 12px/210px '微软雅黑';

                background: #f0f;

            }

        </style>

    </head>

     

    <body>

        <ul id="gps_left">

            <li style="background:#ff0">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

        <p id="box">

            <ul id="gps_right">

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

            </ul>

        </p>

     

    </body>

    <script>

        $("#gps_left li").hover(function () {

            var $indes = ($(this).index()) //获取下标

            var l = -($indes*200)+"px";

            $("#gps_left li").css("background","#ccc").eq($indes).css("background","#ff0");

            $("#gps_right").animate({

                left: l,

            },200).end();

             

        })；

    </script>

     

    </html></code>

    회신하다
    0
  • 취소회신하다