Соседние блоки
Всем доброго времени суток. Ребят нужна помощь, дело вот в чем.
Есть два блока, в одном из них есть еще блоки.
<div class='big-one'>
<div class='smaal-block'></div>
<div class='smaal-block'></div>
<div class='smaal-block'></div>
</div>
<div class='big-two'>
</div>
При наведении на блок "smaal-block" заполняется второй большой блок (например Привет прекрасный мир!). Наводишь на другой маленький блок второй большой блок наполняется по-другому (например Привет мир!). Есть проблема что если быстро переводишь мышку на второй блок, иногда цепляешь краешек другого маленького блока ("small-block"). и на втором уже отображается не то что нужно. Как можно сделать так чтоб если не сильно задеваешь переводя на второй блок событие не срабатывает. Заранее спасибо. |
Цитата:
|
Либо поместить ДИВы
Цитата:
padding: <указать_нужный_зазор>; |
Понял тебя спасибо. Но есть момент. Если переводишь по маленьким блокам "smaal-block" то нужно чтоб работал по всему телу блока. А если переводишь на воторой блок то тогда, не по всей дабы избежать данного бага. Возможно ли так?
|
Shuryga,
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.small-block
{
position: relative;
width: 30px;
height: 30px;
background-color: Green;
border: 1px solid black;
}
.small-block:hover
{
background-color: lightgreen;
}
</style>
<script>
$(function () {
var mess = ['Первый', 'Второй', 'Третий'];
var timeout;
$('.small-block').each(function (indx, element) {
$(element).on('mouseenter', function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
$('.big-two').html(mess[indx]);
}, 1000);
})
})
})
</script>
</head>
<body>
<div class='big-one'>
<div class='small-block'></div>
<div class='small-block'></div>
<div class='small-block'></div>
</div>
<div class='big-two'>
</div>
</body>
</html>
|
Цитата:
|
Ребят всем большое спасибо буду тестить.
|
| Часовой пояс GMT +3, время: 15:32. |