Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2015, 20:24
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

Обработка горизонтального меню при наведении курсора
Здравствуйте!
Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор.
Как можно реализовать стрелку над меню?

Капаю в эту сторону:
<html>
    <head>

	<script >

window.onload = function(){
    var rez = document.getElementsByTagname("li");
    
	//так не хочет работать,а если прописать ul свой  id  то alert отрабатывает
    
	
    rez.onmouseover = function(){
        alert('esrgsdghsd');
		
    };
    rez.onmouseout = function(){
        alert('esrgssdfdghsd');
		
    };
};
</script>
<style>
 li{display: inline-block;}
body{margin: 0 auto; text-align:center; padding:20px;}
 </style>  
    </head>
    
    <body>
        <ul >
            <li><a href="#company">О компании</a></li>
            <li><a href="#services">Услуги</a></li>
            <li><a href="#team">Сотрудники</a></li>
            <li><a href="#contacts">Контакты</a></li>
        </ul>
    </body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2015, 20:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от unkind
onmouseover
rez это куча элеметов, у массива элементов нет такого свойства,
Сообщение от unkind
getElementsByTagname
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2015, 20:33
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

рони,
т,е я в переменную rez заношу все элементы li,а потом ловлю через onmouseover и это не верно?
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2015, 21:02
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

Пытаюсь сначала проверить отрабатывает ли мой alert
window.onload = function(){
var rez = document.getElementsByTagName("ul").getElementsByTagName("li");
   
    rez.onmouseover = function(){
        alert('esrgsdghsd');

    };
    rez.onmouseout = function(){

        alert('esrgssdfdghsd');
    };

};

Не отрабатывает
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2015, 21:21
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

Может так будет
<html>
<head>
    <meta charset="windows-1251">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script >
        window.onload = function () {
            var lis = document.getElementsByTagName('li');

            for (var i = 0; i < lis.length; i++) {
                var li = lis[i];
                li.onmouseout = function () {
                    alert('Out')
                };

                li.onmouseover = function () {
                    alert('Over')
                }

            }
        }
      
    </script>
    <style>
        li{display: inline-block;}
        body{margin: 0 auto; text-align:center; padding:20px;}
    </style>
</head>

<body>
<ul >
    <li><a href="#company">О компании</a></li>
    <li><a href="#services">Услуги</a></li>
    <li><a href="#team">Сотрудники</a></li>
    <li><a href="#contacts">Контакты</a></li>
</ul>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 03.11.2015, 21:39
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

Mess4me,
вместо alert('Out') как можно подставить картинку над тем элементов на котором курсор?
может так:
при наведении на элемент получить его id ,а потомвывести изображение над ним?только как...если бы html ,это ка-то понятно
Ответить с цитированием
  #7 (permalink)  
Старый 03.11.2015, 21:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

unkind,
Speech Bubbles
Ответить с цитированием
  #8 (permalink)  
Старый 03.11.2015, 21:57
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

рони,
спасибо,а если js реализовать, в какую сторону копать?
есть картинка,которая должна показывать над тем пунктмо меню ан котором курсор
Ответить с цитированием
  #9 (permalink)  
Старый 03.11.2015, 22:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от unkind
спасибо,а если js реализовать, в какую сторону копать?
достаточно прочитать про classList.add/remove
взяв любое оформление из ссылки выше
Ответить с цитированием
  #10 (permalink)  
Старый 03.11.2015, 22:11
Аватар для unkind
Кандидат Javascript-наук
Отправить личное сообщение для unkind Посмотреть профиль Найти все сообщения от unkind
 
Регистрация: 01.11.2012
Сообщений: 103

рони,
буду разбираться,спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Меню закрывается при наведении мыши (Срабатывает MouseOut родительского контейнера) BirviZ Events/DOM/Window 2 08.06.2015 23:29
Смена картинки при наведении курсора на поле. ExtrAngel Общие вопросы Javascript 1 27.11.2013 23:11
Слайдер при наведении курсора ramzesn Элементы интерфейса 1 17.11.2013 13:45
смена div блока при наведении курсора мыши Денис2201 Общие вопросы Javascript 3 07.10.2013 13:43