Home/ Questions/Q 7404693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:17:32+00:00

I want to design a menu that when I hover a link , the

  • 0

I want to design a menu that when I hover a link , the link pushed forward and when I move the mouse out of that , the link moves backward.

I know I can done that with .hover function.I don’t want to use jQuery Events. I want to use just javascript events that they are embed in html tags.

here is my attempt:

  <script type="text/javascript">
  function MIn()
  {
    jQuery(this).animate({paddingLeft:"20px"},500);
  }
  function MOut()
  {
    jQuery(this).animate({paddingLeft:"0px"},500);
  }             
  </script>
</head>
<body>
  <ul>
    <li onmouseover = "MIn()" onmouseout="MOut()" ><a href="#">Home</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Download</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Products</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"> <a href="#">Register</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">About</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Contact</a></li>
  </ul>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You couldnt use jQuery(this) in javascript function wout jQuery selector. You have to send element like this. 

    <script type="text/javascript">
      function MIn(elm)
      {
        jQuery(elm).animate({paddingLeft:"20px"},500);
      }
      function MOut(elm)
      {
        jQuery(elm).animate({paddingLeft:"0px"},500);
      }             
      </script>
    </head>
    <body>
      <ul>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)" ><a href="#">Home</a></li>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Download</a></li>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Products</a></li>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)"> <a href="#">Register</a></li>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">About</a></li>
        <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Contact</a></li>
      </ul>
    </body>
    • 0