Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/14: Рейтинг темы: голосов - 14, средняя оценка - 5.00
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
1

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click

08.06.2013, 20:54. Просмотров 2875. Ответов 6
Метки нет (Все метки)

Нужно при клике, исключить события hover, во.

И
1. Глюки .hover:
При наведении на блок, к которому он применяется(стрелочка): стрелочка скaчет вверх-вниз, как избежать? z-index? Если да, подскажите как реализовать.

Помогите, пожалуйста. Или посоветуйте литературу.

Исходник вот:


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
 
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
 
 
<style type="text/css" media="screen">
 
body {
  margin: 0;
}
 
p {
  margin:0;
}
 
header {
  width: 100%;
  height: 136px;
  position: absolute;
  top:100px;
  left:0;
  background: black;
}
 
.logo {
  width: 400px;
  height: inherit;
  background: #28A4E1;
  float: left;
}
 
.menuright {
  min-width: 20px;
  max-width: 300px;
  height: inherit;
  background: rgb(40, 164, 225);
  float: right;
  position: absolute;
  top: 0;
  right: 0;
}
 
.menu {
  min-width: 600px;
  width: auto;
  height: 80px;
  display: table;
  margin: 20px auto;
}
 
.menu ul {
  list-style: none;
  display: table-row;
}
 
.menu ul li {
  display: table-cell;
}
 
.menu ul li p {
  font:1em 'OpenSansCondensedLight', Arial, sans-serif;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  text-align: center;
  border-left: 1px solid rgba(226,226,195,.05);
  color: white;
}
 
.arrowInMenu {
  width:8px;
  height:8px;
  border-right:1px solid gray;
  border-bottom:1px solid gray;
  transform:rotate(45deg);
  margin: auto;
}
 
 
</style>
 
</head>
<body>
 
<header>
 
<div class="logo"><img style="margin:50px auto auto 146px;" src="http://www.cyberforum.ru/images/logo.png"/><!--Логотип(ваше имя, фамилия и проффесия)--><img style="float:right;margin-right:-64px;" src="http://www.cyberforum.ru/images/extra1.png"/></div>
<div class="menu">
  <ul>
    <li><div id="a1" class="arrowInMenu"></div><p id="m1" style="border-left:none;">Obo mne</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Yslygi</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Novosti</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Soveti spe******ta</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Kontaktu</p>
    </li>
  </ul>
 
 
</div>
 
<div class="menuright"></div>
 
 
</header>
 
 
<script>
 
 
    $('#m1').hover(
      function(){
        $('#a1').transition({y:'8px',rotate:'45deg'})},
      function(){
        $('#a1').transition({y:'0px',rotate:'45deg'});
    });
 
    $('#m1').click(function(){
        $('#a1').transition({y:'26px',rotate:'-135deg'});
        $('header').delay(600).transition({y:'100px'},600);
    });
 
 
</script>
 
 
</body>
</html>
Добавлено через 36 минут

Добавлено через 2 часа 2 минуты
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    jQuery('#m1').click(function(){
        $('#a1').transition({y:'26px',rotate:'-135deg'});
        $('header').delay(600).transition({y:'100px'},600);
        $('#m1').data('clicked', true);
    });
 
    if(jQuery('#m1').data('clicked')) {
 
    }
    else {
        $('#m1').hover(
      function(){
        $('#a1').fadeIn(300).transition({y:'8px',rotate:'45deg'},300)},
      function(){
        $('#a1').transition({y:'0px',rotate:'45deg'},300).fadeOut(600);
    });
    };
Вот ребятки алгоритмик типа такой, но чета не работает. Где логику подлатать?
Ну то есть не работает чтоб ховер дизейблился если клик актив, что не так??
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.06.2013, 20:54
Ответы с готовыми решениями:

Перестал работать hover после события click
Друзья, помогите разобраться с возникшей проблемой! 1. Есть 9 картинок-ссылок, первой из которых...

Побороть click mobile при .hover
Добрый день! $('#id').hover(function(){...}, function(){...})); Упрямо срабатывает при клике...

Заменить hover на click
Можно ли как-то заменить hover в этом примере на клик? Желательно, как можно проще. Нужно, чтобы...

Изменить hover на click
Всем привет. Есть выпадающие меню по наведению, хочу переделать по клику $('#menu li#submenu...

Не работает click, hover
Приветствую всех! Очень нужна помощь, не работают события. Делаю несложный слайдер, функция...

6
Sunman
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
08.06.2013, 21:58 2
тебе надо, чтобы стрелка опускалась при наведении на пункт меню, а по нажатию переворачивалась над ним? Есть вариант через классы сделать.
1
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
08.06.2013, 22:28  [ТС] 3
ну оно так и делается, только если я не отвожу мышь, если отвожу - активируется ховер
нужно просто вырубить ховер, если я активировал клик, я считаю это не сложно, нужно через условия, не знаю как

Добавлено через 7 минут
я думаю как то так

if (click === active) {
hover === none;
}
else {
hover === active;
}

как то так, только как в javascript, так же не заработает)
0
Sunman
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
08.06.2013, 22:49 4
vooduq, прицепи hover к какому-то классу и удаляй его при щелчке фиксируя позицию стрелки. Чтобы удалить метод removeClass() или если нужно по повторному щелку возвращать hover, то тогда имеет смысл использовать toggleClass().

Не могу сказать насколько хорош этот метод ибо сам имею небольшую практику JQ, но должно работать.
1
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
08.06.2013, 23:07  [ТС] 5
или скажем есть мысль сделать просто при клике stay и чтоб оно жилезно стояло, но тогда будут глюки, через класс не хотелось бы, будет план б

Добавлено через 14 минут
а класы не катят, так как наводится то все равно будет на блок, значик класс активируется все равно, а какая разница, что класс активируется, что .hover? надо deactive ховер при клике сделать, вот и все
все дела, только как??
0
Sunman
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
08.06.2013, 23:41 6
vooduq,
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<header>
 
<div class="logo"><img style="margin:50px auto auto 146px;" src="http://www.cyberforum.ru/images/logo.png"/><!--Логотип(ваше имя, фамилия и проффесия)--><img style="float:right;margin-right:-64px;" src="http://www.cyberforum.ru/images/extra1.png"/></div>
<div class="menu">
  <ul>
    <li><div id="a1" class="arrowInMenu m2"></div><p id="m1" class="m3" style="border-left:none;">Obo mne</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Yslygi</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Novosti</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Soveti spe******ta</p>
    </li>
    <li><div class="arrowInMenu"></div><p>Kontaktu</p>
    </li>
  </ul>
 
 
</div>
 
<div class="menuright"></div>
 
 
</header>
 
 
<script>
 
 $('p.m3').hover(
      function(){
        $('.m2').transition({y:'8px',rotate:'45deg'})},
      function(){
        $('.m2').transition({y:'0px',rotate:'45deg'});
    });
     
 
    $('p#m1').click(function(){
        $('#a1').transition({y:'26px',rotate:'-135deg'});
        $('header').delay(600).transition({y:'100px'},600);
        $('#a1').toggleClass("m2");
        $('p').removeClass("m3");
    });
 
 
</script>
а так?
1
vooduq
69 / 69 / 22
Регистрация: 06.06.2013
Сообщений: 404
09.06.2013, 10:10  [ТС] 7
да, расскажи поподробнее про манипуляцию $('#a1').toggleClass("m2");
не совсем пойму механику.

m3 отвечает за ховер, при клике мы его удаляем это понятно

ага, $('#a1').toggleClass("m2"); - если при клике первом есть класс m2, мы его удаляем. еще раз кликаем, проверяет что его нету, оно его обратно добавляет

Добавлено через 7 часов 56 минут
все равно нужно сравнение, так код логичнее + а как быть с другими пуктами? опять классы удалять
да еще и так, что они между собой переключались, по моему проще if else, но как??
0
09.06.2013, 10:10
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.06.2013, 10:10

.hover срабатывает а .click нет
не знаю в чем именно проблема. ну нужно именно .click но функция не срабатывает а .hover работает...

Связка событий hover и click
День добрый. Помогите решить сию задачку. Есть две формы с радио кнопками и по текстовому полю над...

Hover/click-звуки для сайта (важно)
Всем салют. В общем сразу к делу. Хочу реализовать воспроизведение звуков при событиях click и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru