Форум Пользователи Пыхослёт
новые сообщения ответы на мои сообщения избранное скрытые темы случайный топик открыть всё в новых вкладках

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

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

  • AdmBuxonly

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

    Spritz 8 июня 2011 г. 13: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 г. 15:06, спустя 1 час 52 минуты 14 секунд 

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

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

  • AdmBuxonly

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

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

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

  • technobulka

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

    Spritz 8 июня 2011 г. 19: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 г. 21:41, спустя 2 часа 3 минуты 16 секунд 

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


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

  • technobulka

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

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

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

  • AdmBuxonly

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

    Spritz 8 июня 2011 г. 21: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 г. 22: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 г. 22:16, спустя 6 минут 28 секунд

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

  • truth4oll

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

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

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

  • AdmBuxonly

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

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


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


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

  • AdmBuxonly

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

    Spritz 12 июня 2011 г. 16: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 г. 16:33, спустя 14 минут 54 секунды

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

  • technobulka

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

    Spritz 12 июня 2011 г. 16: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 г. 16:58, спустя 17 минут 31 секунду

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

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

наше все Форум Пользователи Пыхослёт Slack Тикеты
социализация
(ц) пыха.ру / с 2007 года         Total: 0.018s         Часовой пояс — Europe/Moscow
ПИПИСЬКА