Есть блоки фиксированной ширины и высоты, например по 100px. Они все стоят по порядку один за одним по {float: left;}. Таких блоков может быть любое количество. Теперь когда я навожу на один из этих блоков, рядом, грубо говоря немного ниже курсора, должен появляться информационный блок. Там будет описываться информация о том блоке, на который я навел. Вот
$("body").on("mouseover", "[data-info]", function() {
$("#" + $(this).data("info") + "").addClass("active");
});
$("body").on("mouseout", "[data-info]", function() {
$("#" + $(this).data("info") + "").removeClass("active");
});
.div {
float: left;
color: #333;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.div:hover {
color: blue;
border: 1px solid blue;
cursor: pointer;
}
.info {
width: 100px;
height: 100px;
display: inline-block;
background: #eee;
opacity: 0;
}
.info.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div data-info="log1" class="div">№1</div>
<div data-info="log2" class="div">№2</div>
<div id="log1" class="info">Блок 1</div>
<div id="log2" class="info">Блок 2</div>
я сделал что-то подобное, но проблема в том, что инфо-блоки появляются где-то в конце.
А должен появляться как-то так:
Я понимаю, что мне нужно просто правильно настроить стили для info-блоков, но я не знаю как. Подскажите, пожалуйста.