Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2015, 21:29
Новичок на форуме
Отправить личное сообщение для Askanim Посмотреть профиль Найти все сообщения от Askanim
 
Регистрация: 22.08.2015
Сообщений: 7

помогите пожалуйстаюю Я ещё ноовичёк Т_т.
$(".focus-pokus").mousemove(function () {
	$(".hid1").hide("1000");
	$(".show1").show("1000");
});
$(".show1").mouseout(function () {
	$(".hid1").show("1000");
	$(".show1").hide("1000");

Вот есть код js
Вот есть код HTML котором он должен работать ну он в принципе и работает, но не так как я хочу...
<div class="images-cont">
  <img src="img/img1.jpg" class="focus-pokus" alt="">
	<div class="hid1 out-position">
		<ul>
		 <li class="li-1"><div class="f1">
                 <p class="comment">холодос</p></div>
                 <img src="img/m_icon_holodos.png" class="i1" alt="">
		</li>
<li class="li-2"><div class="f2">
<p class="comment">телефон</p></div><img src="img/m_icon_telefon.png" class="i2" alt=""></li>
<li class="li-3"><div class="f3"><p class="comment">телевизор</p></div><img src="img/m_icon_telik.png" class="i3" alt=""></li>
<li class="li-4"><div class="f4"><p class="comment">кухня</p></div><img src="img/m_icon_stolovka.png" class="i4" alt=""></li>
<li class="li-5"><div class="f5"><p class="comment">Wi-Fi</p></div><img src="img/m_icon_wifi.png" class="i5" alt=""></li>
</ul>
</div>
<div class="show1 position-in">
<h2 class="zago1">ЛЮКС</h2>
<button class="btn1 podrobnosti">ПОДРОБНЕЕ</button>
</div>
</div>


мм ну вот css ещё код
.cont img {
	width:380px;
	
}
.out-position {
	position: absolute;
    height: 40px;
    width: 257px;
    bottom: 60px;
    background-color: black;
}
.out-position ul {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0px;
    padding: 0px;
    width: 257px;
}
.out-position li {
	list-style-type: none;
	margin:10px;
}
/*.i1,.i2,.i3,.i4,.i5 {
	position: absolute;
	z-index: 25;
}*/
.out-position img.i1 {
	width: 21px;
	height: 21px;
}
.out-position img.i2 {
	width: 19px;
	height: 21px;
}
.out-position img.i3 {
	width: 22px;
	height: 21px;
}
.out-position img.i4 {
	width: 12px;
	height: 21px;
}
.out-position img.i5 {
	width: 27px;
	height: 21px;
}
.f1 {
	opacity: 0;
	top: -38px;
	margin-left:0px; 
	z-index: 50;
	position: absolute !important;
    width: 50px;
    height: 35px;
    border-top: 15px solid transparent;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid white;
    position: relative;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
p.comment {
	font-size: 10px;
	text-align: center;
	margin: 0px;
	padding-top: 5px;
}
.f5 {
	opacity: 0;
	top: -38px;
	margin-left:-9px; 
	z-index: 50;
	position: absolute !important;
    width: 50px;
    height: 35px;
    border-top: 15px solid transparent;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid white;
    position: relative;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.f2,.f3,.f4 {
	opacity: 0;
	top: -38px;
	margin-left:-15px; 
	z-index: 50;
	position: absolute !important;
    width: 55px;
    height: 35px;
    border-top: 15px solid transparent;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 15px solid white;
    position: relative;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.f2:before,.f3:before,.f4:before,.f5:before  {
	opacity: 0;
	position: absolute !important;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    position: absolute;
    content: "";
    top: 20px;
    left: 14px;
     -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.f1:before {
	opacity: 0;
	position: absolute !important;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    position: absolute;
    content: "";
    top: 20px;
    left: 2px;
     -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.li-1:hover div, div:before, 
.li-2:hover div, div:before,
.li-3:hover div, div:before,
.li-4:hover div, div:before,
.li-5:hover div, div:before {
			opacity: 1 !important;
}
.images-cont img.focus-pocus:hover .out-position {
	display: none;
}
.position-in {
	display: none;
	position: absolute;
	bottom:60px;
	z-index: 25;
	background-color: rgba(0, 87, 255, 0.67);
	width: 257px;
	height: 257px; 
}
.position-in h2 {
		color:white;
		text-align: center;
		font-size: 24pt;
		font-weight: 300;
		margin-top:65px;

} 
.podrobnosti {
	position: absolute;
	width: 210px;
	height: 42px;
	border: 3px solid #fff;
	text-align: center;
	background: transparent;
	color: white;
	bottom: 40px;
	left:50%;
	margin-left: -105px;
}
.podrobnosti:hover {
	background-color: rgba(0, 0, 0, 0.50);
	;
}

вот помоему это всё... Суть в том что при наведении мышки на картинку изначальную, чёрная панелька внизу уходит а заместо неё приходит синий див там с надписью и кнопкой на нём ну всмысле поверх всего блока, вот а уходить он далжен когда я с него мышку уберу, проблема в том что событие mouseout слишком круто сробатывает даже когда я в этом блоке и мыш попадает в нём на строки или кнопку сразу сробатывает событие, а мне нужно чтобы оно срабатывало когда я за границыв блока выйду... Кто нибудь подскажите пожалуйста как терь жить то дальше и чё теперь делать то или скажите что почитать. Я до педрить не могу как сделать то, что я хочу. =((( подскажите плиз.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2015, 21:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,290

Сообщение от Askanim
mouseout
=> mouseleave
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2015, 23:35
Новичок на форуме
Отправить личное сообщение для Askanim Посмотреть профиль Найти все сообщения от Askanim
 
Регистрация: 22.08.2015
Сообщений: 7

ААААА...... Спасибо, всё заработало... Не знал, блин надо почитать все собтия которые есть, а подскажите пожалуйста, а можно самому событие написать:?
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2015, 23:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,290

Сообщение от Askanim
а можно самому событие написать:?
какое?
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2015, 13:43
Новичок на форуме
Отправить личное сообщение для Askanim Посмотреть профиль Найти все сообщения от Askanim
 
Регистрация: 22.08.2015
Сообщений: 7

например при пересеении мышки конкретно правой границы дива... А ещё вопрос потому что вчера писал сделал всё как вы сказали... Но есть моменты... Я там ещё дописал

код
$(".focus-pokus").mouseenter(function () {
	$(".hid1").hide("1000");
	$(".show1").show("1000");
});
$(".show1").mouseleave(function () {
	$(".hid1").show("1000");
	$(".show1").hide("1000");
});
$(".focus2").mouseenter(function () {
	$(".hid2").hide("1000");
	$(".show2").show("1000");
});
$(".show2").mouseleave(function () {
	$(".hid2").show("1000");
	$(".show2").hide("1000");
});
$(".focus3").mouseenter(function () {
	$(".hid3").hide("1000");
	$(".show3").show("1000");
});
$(".show3").mouseleave(function () {
	$(".hid3").show("1000");
	$(".show3").hide("1000");
});
$(".gl-info-cont").mouseleave(function () {
	$(".hidall").show("1000");
	$(".showall").hide("1000");
});
$(".show2").mouseenter(function () {
	$(".hid1").show("1000");
	$(".show1").hide("1000");
});

$(".show1" || ".show3").mouseenter(function () {
	$(".hid2").show("1000");
	$(".show2").hide("1000");
});

$(".show2").mouseenter(function () {
	$(".hid3").show("1000");
	$(".show3").hide("1000");
});

но всё равно события бывают не успевают обрабатываться.. И потом например после того как много раз провёл быстро по всем элементам... Они потом ещё походу столько сколько раз провёл, столько раз и скачут...
как можно сделать так, чтобы после срабытавния события не запускался вызов нового пока не закончится вызов предыдущего то есть по факту присутствия мыши на элементе, а если нету то и не вызывать.
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2015, 14:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,290

Сообщение от Askanim
столько сколько раз провёл, столько раз и скачут...
...stop().show...
...stop().hide...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить картинку на страницу поверх ее.. Вадим_СС Javascript под браузер 2 23.04.2012 08:45
Добовление формы еще Kuklavod jQuery 2 03.11.2011 14:12
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37