$(".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 слишком круто сробатывает даже когда я в этом блоке и мыш попадает в нём на строки или кнопку сразу сробатывает событие, а мне нужно чтобы оно срабатывало когда я за границыв блока выйду... Кто нибудь подскажите пожалуйста как терь жить то дальше и чё теперь делать то или скажите что почитать. Я до педрить не могу как сделать то, что я хочу. =((( подскажите плиз.
