Mouseover function



  • Guys, help me. What's wrong? How do I fix it? I'll be very grateful.

     $(".arrow").mouseover(
     function(){
      $(this).css('height', '40px');
     }
    )
    #main{
      width: 300px;
      height: 100px;
    }
    .arrow{
     float: left;
     width: 3px; 
     background: white;
     cursor: pointer;
        background: #000;
        margin-left: 10px;
    }
    .arrow_mini{
     height: 15px;
    

    }
    .arrow_big{
    height: 25px;
    }

    <div id="main">
    <div class="arrow arrow_big arrow_1"></div>
    <div class="arrow arrow_mini arrow_2"></div>
    <div class="arrow arrow_mini arrow_3"></div>
    <div class="arrow arrow_mini arrow_4"></div>
    <div class="arrow arrow_mini arrow_5"></div>
    <div class="arrow arrow_mini arrow_6"></div>
    <div class="arrow arrow_mini arrow_7"></div>
    <div class="arrow arrow_mini arrow_8"></div>
    <div class="arrow arrow_mini arrow_9"></div>
    <div class="arrow arrow_big arrow_10"></div>
    </div>

    When a courseor is installed, the height of the sticks shall be changed. ♪ ♪
    Thank you very much!



  • Your HTML code is probably connected before jquery. Connect him. after jquery and everything will work properly.

    <html>
    

    <head>
    <style>
    #main {
    width: 300px;
    height: 100px;
    }
    .arrow {
    float: left;
    width: 3px;
    background: white;
    cursor: pointer;
    background: #000;
    margin-left: 10px;
    }
    .arrow_mini {
    height: 15px;
    }
    .arrow_big {
    height: 25px;
    }
    </style>
    </head>

    <body>
    <div id="main">
    <div class="arrow arrow_big arrow_1"></div>
    <div class="arrow arrow_mini arrow_2"></div>
    <div class="arrow arrow_mini arrow_3"></div>
    <div class="arrow arrow_mini arrow_4"></div>
    <div class="arrow arrow_mini arrow_5"></div>
    <div class="arrow arrow_mini arrow_6"></div>
    <div class="arrow arrow_mini arrow_7"></div>
    <div class="arrow arrow_mini arrow_8"></div>
    <div class="arrow arrow_mini arrow_9"></div>
    <div class="arrow arrow_big arrow_10"></div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script>
    $(".arrow").mouseover(function() {
    $(this).css('height', '40px');
    });
    </script>

    </html>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2