За последние 24 часа нас посетили 17796 программистов и 1679 роботов. Сейчас ищут 840 программистов ...

появление дива при наведении

Тема в разделе "JavaScript и AJAX", создана пользователем jenya777777, 1 янв 2011.

  1. jenya777777

    jenya777777 Активный пользователь

    С нами с:
    16 мар 2010
    Сообщения:
    562
    Симпатии:
    0
    Есть ява скрипт
    [js]
    <script language="javascript" src="jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(init);

    function init(){
    $('#q').hover(
    function(){$("#to").css({"visibility":"visible", "float":"right", "border":"1px solid blue"});},
    function(){$("#to").css("visibility", "hidden");}
    );
    }

    </script>
    [/js]

    Стиль

    [css]
    <style>
    #to {
    float: right;
    border: 1px solid blue;
    visibility: hidden;

    }

    #q {
    border: 1px solid black;
    }

    </style>
    [/css]

    Код
    Код (Text):
    1.  
    2. <!-- первый див -->
    3. <div id="q">
    4. <div id="to">word</div>
    5. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
    6. </div>
    7. <br />
    8.  
    9. <!-- второй див -->
    10. <div id="q">
    11. <div id="to" >word</div>
    12. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
    13. </div>
    При наведении на первый див id=q появляется див id=to.
    С первым дивом работает, а вот если наводишь на второй див то у него уже див id=to не появляется.
    Как можно реализовать, чтобы при наведении мышки на второй див id=to тоже появлялся?
     
  2. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    id - это уникальный идентификатор элемента на странице.
    делай через классы и фильтрацию вложенных элементов

    [js]<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.q').hover(
    function(){ $(this).children('.to').css({"visibility":"visible", "float":"right", "border":"1px solid blue"}); },
    function(){ $(this).children('.to').css("visibility", "hidden"); }
    );
    });
    </script>[/js]

    HTML:
    1. <div class="q">
    2.   <div class="to"></div>
    3. </div>
     
  3. jenya777777

    jenya777777 Активный пользователь

    С нами с:
    16 мар 2010
    Сообщения:
    562
    Симпатии:
    0
    Спасибо большое, помогло!