Применение окна наведения на основе макета сетки начальной загрузки на каждые 2x2 столбцы и строки

Question

Я пытаюсь создать динамическую сетчатую систему, которая будет применять поле наведения для каждого макета сетки 2x2.

У меня есть скрипка здесь http://jsfiddle.net/rjayako/bfwa0tte/

В основном первые два с левой и второй строкой первой два слева должны одну и ту же коробку наложения. И третья и четвертая первая строка И вторая строка третьего и четвертого должны делиться одним и тем же наложением.

Я создал макет здесь, о чем я говорю.

В настоящее время мой оверлей окно выглядит примерно так

.hover-box { 
    position: absolute; 
    width: 430px; 
    height: 200px; 
    background-color: blue; 
    padding-right: 20px; 
    padding-left: 0px; 
    text-size: 30px; 
    text-align: center; 
    color: #fff; 
    padding-top: 80px; 
} 

К сожалению, то, что это делает наложение все коробки на одном месте.

Я был в этом какое-то время, и у меня нет идей. Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

Вот очень скелетный пример того, как вы могли бы сделать что-то вроде этого с только HTML и CSS. В основном то, что я сделал, разделяет содержимое на 2x2 «внешнюю» сетку, где каждый ящик имеет 2x2 «внутреннюю» сетку. Тогда это всего лишь вопрос абсолютно позиционирования элемента внутри «внутренней» сетки и отображения его на :hover.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.category { 
 
    width: 50%; 
 
    float: left; 
 
    border: 1px solid #00f; 
 
    position: relative; 
 
} 
 

 
.category:hover .hover-dingus { 
 
    display: block; 
 
} 
 

 
.category .hover-dingus { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.3); 
 
    font-size: 39px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding-top: 27%; 
 
} 
 

 
.category ul { 
 
    list-style: none; 
 
} 
 

 
.category li { 
 
    float: left; 
 
    width: 50%; 
 
    height: 200px; 
 
    border: 1px solid #f00; 
 
}

<div class="category"> 
 
    <div class="hover-dingus">Music!</div> 
 
    <ul> 
 
    <li>Rock</li> 
 
    <li>Alternative</li> 
 
    <li>Blues</li> 
 
    <li>Jazz</li> 
 
    </ul> 
 
</div> 
 
<div class="category"> 
 
    <div class="hover-dingus">Music!</div> 
 
    <ul> 
 
    <li>Rock</li> 
 
    <li>Alternative</li> 
 
    <li>Blues</li> 
 
    <li>Jazz</li> 
 
    </ul> 
 
</div> 
 
<div class="category"> 
 
    <div class="hover-dingus">Music!</div> 
 
    <ul> 
 
    <li>Rock</li> 
 
    <li>Alternative</li> 
 
    <li>Blues</li> 
 
    <li>Jazz</li> 
 
    </ul> 
 
</div> 
 
<div class="category"> 
 
    <div class="hover-dingus">Music!</div> 
 
    <ul> 
 
    <li>Rock</li> 
 
    <li>Alternative</li> 
 
    <li>Blues</li> 
 
    <li>Jazz</li> 
 
    </ul> 
 
</div>

Answer 2

Вы можете использовать querySelectors и jQuery и data. Другой вариант - переформатировать ваш HTML-код и использовать classes с :hover. Я включил оба варианта в этот jsfiddle. Приведенный ниже код является вариантом JQuery

$('[data-hover-group]').each(function() { 
    var group_num = this.dataset.hoverGroup; 
    $(this).on('mouseover', function(e) { 
    $('[data-hover-group="' + group_num + '"]').each(function() { 
     console.log(this); 
     this.dataset.hover = 'true'; 
    }) 
    }) 
    $(this).on('mouseout', function(e) { 
    $('[data-hover-group="' + group_num + '"]').each(function() { 
     console.log(this); 
     this.dataset.hover = 'false'; 
    }) 
    }) 
}) 

Вот она реализована с наложением http://jsfiddle.net/stevenkaspar/fbtu384t/2/