ФорумПрограммированиеJavaScript → Увеличение при наведении курсора

Увеличение при наведении курсора

  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 5:14

    Привет! Пытаюсь сделать так, чтобы при наведении курсора мыши на DIV он уменьшался в ширине и высоте а при отведении курсора мыши обратно возвращался в исходный размер. Вот что делал я:

    // Скрипты, обрабатывающие теги документа index.php
    var adc = $('#block').width(500).height(400);
    adc.css('border','3px solid #ff0000');
    adc.css('background-color','#ccc');
    adc.css('margin','25px');
    adc.css('cursor','pointer');
    // Эта функция обрабатывает события для блока див
    function blockOver (result) {
    if (result) {
    adc.width(200);
    }
    else adc.width(500);
    }
    }); // Это строка завершает построение DOM дерева


    а вот и сам див:

    <div id="block" onmouseover="blockOver(true)" onmouseout="blockOver(false)">Это блочная хрень</div>


    Но ни чего не происходит. Подскажите что делаю не так… я начинающий в JQ и JS. В общем функция не срабатывает.
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 8 июня 2011 г. 7:06, спустя 1 час 52 минуты 14 секунд

    div { width:200px; height:200px; }
    div:hover { width:500px; height:500px; }

    и не еби себе мозг
    Высокоуровневое абстрактное говно
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 10:52, спустя 3 часа 46 минут 12 секунд

    Чет я ни че не понял)
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 8 июня 2011 г. 11:38, спустя 45 минут 37 секунд

    Чет я ни че не понял)

    это цсс, блеать! при наведении блок увеличивается)) нафига на такую простецку задачу выносить себе мозг скриптами?)

    $('.block')
       .css({
           width: 500,
           height: 400,
           border: '3px solid #ff0000',
           backgroundColor: '#ccc',
           margin: 25,
           cursor: 'pointer'
       })
       .mouseover(function() {
           $(this).width(200);
       })
       .mouseout(function() {
           $(this).width(500);
        });
    Высокоуровневое абстрактное говно
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 13:41, спустя 2 часа 3 минуты 16 секунд

    var topMenuHomeAHover = $('.home a:hover').height(40);
    topMenuHomeAHover.css('color','#fff');


    А вот так ссылки можно оформлять? Или тоже через моусовер? Потому что у меня такая запись для ссылки не работает(((
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 8 июня 2011 г. 13:46, спустя 5 минут 37 секунд

    раз не работает, значит нельзя -_-
    че те не травятся .mouseover(), .mouseenter() и .hover()?
    Высокоуровневое абстрактное говно
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 13:50, спустя 3 минуты 30 секунд


    раз не работает, значит нельзя -_-
    че те не травятся .mouseover(), .mouseenter() и .hover()?


    Я не не очень хорошо еще понимаю принцип их работы… а про .hover только сейчас узнал. Я вообще вот так сейчас верстаю (тренируюсь, вырабатываю автоматизм, чтобы лучше запомнить, делаю тестовый шаблон):

    // TABLE GLOBAL
    var table = $('.global');
    table.width(902).height(400);
    table.css('background-color','#fff')
    table.css('border','0')
    table.css('margin','0 auto');
    table.css('background-image','url(images/bg.gif)');
    table.css('background-position','center');
    table.css('background-repeat','repeat-y');
    // END TABLE GLOBAL


    вот так вот… и пока больше ни как не умею.. читаю понемногу но это все не то… я в принципе с примеров нормально понимаю… но опять же правила записи того же самого background-color отличаются в двух случаях по разному.
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 8 июня 2011 г. 14:10, спустя 19 минут 55 секунд

    во-первых, кури маны…

    во-вторых, не страдай такой хуйней
    table.width(902).height(400);

    если для этого есть .css()
    table.css({width:902, height:400})


    в-третьих, нафига постоянно обращать к одной и той же фенкции?
    table.css('background-color','#fff')
    table.css('border','0')
    table.css('margin','0 auto');

    у тебя получается "чувак, дай сигарету; дай зажигалку; дай денег;…"
    вместо этого в функцию кидай объект
    table.css({
    backgroundColor: '#fff',
    border: 0,
    margin: '0 auto'
    });

    и получится "чувак, дай сигарету, зажигалку, денег…"

    в-четвертых, нахуя числа в строки пихаешь? не критично конечно, но с числами ему проще работаеццо

    в-пятых, в цсс есть background-image, а в жс есть backgroundImage
    CSS JS
    background-position backgroundPosition
    background-repeat backgroundRepeat
    margin-top marginTop
    и так далее

    в-шестых, учи цсс, блеать!!))) вместо
    background-image: url(images/bg.gif);
    background-position: center;
    background-repeat: repeat-y;

    нормальные люди пишут
    bacground:#fff url('image.jpg') 50% 50% no-repeat;
    Высокоуровневое абстрактное говно
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 14:16, спустя 6 минут 28 секунд

    Спасибо за такой ответ клевый! Ухожу в запой, дабы нужно все осознать и и обработать… все гораздо проще чем я думал… завтра весь файл перепишу по новому, а это 87 строк или 227кб… интересно как завтра будут цифры…
  • truth4oll

    Сообщения: 463 Репутация: N Группа: Адекваты

    Spritz 8 июня 2011 г. 17:08, спустя 2 часа 51 минуту 18 секунд

    87 строк = 227 кб? данунахуй)
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 8 июня 2011 г. 20:51, спустя 3 часа 43 минуты 21 секунду


    87 строк = 227 кб? данунахуй)


    ты прав.. я не туда посмотрел….(( там размер файла 0B…. чет пишу пишу а он не увеличивается…
    Спустя 70 сек.
    а нет вру 4 кб..
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 12 июня 2011 г. 8:19, спустя 3 дня 11 часов 27 минут

    Ребят не стал создавать новую тему в это продолжу один и тот же вопрос мучает. Не пойму принцип работы растолкуйте кто может:

    <link src="jquery.js" type="text/javascript">
    <title>Изучение HTML</title>
    <script type="text/javascript">
    $(document).ready(function() {
    function linkHover() {
    var Link = $('ul li a');
    Link.css({
    color: '#cc0000'
    })
    }
    }
    </script>
    </head>
    <body>
    <ul>
    <li><a href="#" onMouseOver="javascript: linkHover();" >Ntrcn</a></li>
    <ul>
    </body>
    </html>


    Надо чтобы при наведении курсора на ссылку она менялась… что должно передаваться в функцию? то что выше код не пашет…
  • truth4oll

    Сообщения: 463 Репутация: N Группа: Адекваты

    Spritz 12 июня 2011 г. 8:33, спустя 14 минут 54 секунды

    this можно добавить
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 12 июня 2011 г. 8:41, спустя 7 минут 16 секунд

    <link src="jquery.js" type="text/javascript">
     <title>Изучение HTML</title>
    <script type="text/javascript">
    $(document).ready(function() {

    $('ul li a') // нашли ссылку
       .mouseOver(function() { // при наведении на нее
           $(this).css({color: '#cc0000'}); // изменяем ее цвет
       })
       .mouseOut(function() { // убрав курсор
           $(this).removeAttr('style'); // удаляем атрибут style, который создало предыдущее событие
       });

    }
    </script>
    </head>
    <body>
    <ul>
       <li><a href="#">Ntrcn</a></li>
    <ul>
    </body>
    </html>
    Высокоуровневое абстрактное говно
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 12 июня 2011 г. 8:58, спустя 17 минут 31 секунду

    Решение хорошее, но что то не работает… не знаю почему…

Пожалуйста, авторизуйтесь, чтобы написать комментарий!