Jquery + HTML действие при наведении мыши

Тема в разделе "Другие языки", создана пользователем zaffasoft, 12 мар 2011.

Модераторы: Цукер
  1. zaffasoft

    zaffasoft Создатель

    Регистр.:
    2 янв 2007
    Сообщения:
    42
    Симпатии:
    7
    Задача: Поправить существующий скрипт, а именно, чтобы при наведении мыши на обьект менял цвет. На данный момент, все работает, только действие при нажатии на объект. Хотелось бы, данное действие выполнялось при наведении мыши.
    Пытался сменить вместо .click на .onmouseover. Не получилось, может быть кто нибудь сталкивался с данной проблемой?

    Здесь мой код.
    PHP:
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>     
     
        <script type="text/javascript"> 
     var $j = jQuery.noConflict();
    $j(document).ready(function(){ 
     
                $j("th.one").click( function(){ $j
                    ("#tt").removeClass("bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg1"); 
                });
     
                $j("th.two").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg2"); 
                });
     
                $j("th.three").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg3");
                });
                
                $j("th.four").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg4"); 
                });
     
                $j("th.five").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg6 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg5"); 
                });
     
                $j("th.six").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg7 , bg8 , bg9 , bg10 , bg11").addClass("bg6");
                            });
                
                $j("th.seven").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg8 , bg9 , bg10 , bg11").addClass("bg7"); 
                });
     
                $j("th.eight").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg9 , bg10 , bg11").addClass("bg8");
                                });
                
                $j("th.nine").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg10 , bg11").addClass("bg9"); 
                });
     
                $j("th.ten").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg11").addClass("bg10"); 
                });
     
                $j("th.eleven").click( function(){ $j
                    ("#tt").removeClass("bg1 , bg2 , bg3 , bg4 , bg5 , bg6 , bg7 , bg8 , bg9 , bg10").addClass("bg11");
                
                     
                }); 
                    
            });
     
        </script> 
        
        <style type="text/css"> 
        
            ul
            {
                list-style-type:none;
            }
            li
            {
                float:left;
            }
        
            .bg1 { background-color: #ffffff; }
            .bg2 { background-color: #e5e5e5; }
            .bg3 { background-color: #cccccc; }
            .bg4 { background-color: #b3b3b3; }
            .bg5 { background-color: #999999; }
            .bg6 { background-color: #808080; }
            .bg7 { background-color: #666666; }
            .bg8 { background-color: #4d4d4d; }
            .bg9 { background-color: #333333; }
            .bg10 { background-color: #1a1a1a; }
            .bg11 { background-color: #000000; }

            </style>
    <table width="300" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <th scope="col" bgcolor="#FFFFFF" class="one"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#e5e5e5" class="two"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#cccccc" class="three"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#b3b3b3" class="four"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#999999" class="five"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#808080" class="six"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#666666" class="seven"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#4d4d4d" class="eight"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#333333" class="nine"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#1a1a1a" class="ten"><a href="#">&nbsp;</a></th>
        <th scope="col" bgcolor="#000000" class="eleven"><a href="#">&nbsp;</a></th>
      </tr>
    </table>

     
  2. peterstolypin

    peterstolypin Создатель

    Регистр.:
    6 сен 2010
    Сообщения:
    17
    Симпатии:
    4
  3. zaffasoft

    zaffasoft Создатель

    Регистр.:
    2 янв 2007
    Сообщения:
    42
    Симпатии:
    7
  4. alica

    alica

    Регистр.:
    28 июл 2008
    Сообщения:
    243
    Симпатии:
    76
    Можно использовать функции .mousedown(), .mouseenter(), .click(), .mouseleave(), .mousemove(), .mouseout(), .focus(), .mouseover(),а вот функции .onmouseover() у jquery нет.
     
  5. Xata6

    Xata6 Постоялец

    Регистр.:
    20 мар 2007
    Сообщения:
    84
    Симпатии:
    5
    проще "mouseenter" и "mouseleave", пример ниже

    $(document).ready(function(){
    $(".menu_link").mouseenter(function() {
    $(this).addClass('superclass');
    });
    $(".menu_link").mouseleave(function() {
    $(this).removeClass('superclass');
    });
    });