JavaScript Tutorial/jQuery/hover

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Hover action

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("b").hover(function () {
                  $(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
             }, function () {
                  var cssObj = {
                    "background-color" : "#ddd",
                    "font-weight" : "",
                    "color" : "red"
                  }
                  $(this).css(cssObj);
             });
       });
   </script>
 </head>
 <body>
   <body>
     
      Hello
   </body>

</html></source>


hover(over, out): Whenever mouse cursor is moved over a matched element, the first specified function is fired.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("li").hover(
             function () {
               $(this).append($("*"));
             }, 
             function () {
               $(this).find("span:last").remove();
             }
           );
       });
   </script>
 </head>
 <body>
   <body>
  • A
  • B
  • C
  • D


   </body>

</html></source>


Hover to add and remove class

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   
       $(document).ready(function(){
            $("div").hover(
                 function () {
                   $(this).addClass("my");
                 },
                 function () {
                   $(this).removeClass("my");
                 }
            );
       });
   </script>
   <style>
 .my { color:blue; }
 </style>
 </head>
 <body>
   <body>
header 1
   </body>

</html></source>


Hover to fade in and out

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   
       $(document).ready(function(){
             $("div").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});


       });
   </script>
 </head>
 <body>
   <body>

header 1

   </body>

</html></source>


Hover to hide tag

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   
       $(document).ready(function(){
             $("div").hover(
                 function () {
                   $(this).append($(" ***"));
                 }, 
                 function () {
                   $(this).find("span:last").remove();
                 }
            );


       });
   </script>
 </head>
 <body>
   <body>

header 1

   </body>

</html></source>


Tag hover function

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
var newText = $("p").text().split(" ").join("</div>
");
           $("p").html(newText).find("div").hover(
                  function () { $(this).addClass("y"); },
                  function () { $(this).removeClass("y"); });
       });
   </script>
   <style>
     .y { background:yellow; }
 </style>
 </head>
 <body>
   <body>

a ab abc

 </body>
</html></source>