.el:hover > .children {
...
}.el:hover + .el {
...
}.card__link:hover .card__overlay<div class="card">
<div class=card__photo">
<a href="#" class="card__link">Читать дальше</a>
<div class="card__overlay"></div>
</div>
</div>.card__link:hover + .card__overlay {
...
}.elem {
...
position: relative;
}
.elem::before {
content: '';
display: block;
height: 100%;
padding-top: 100%;
}document.addEventListener('DOMContentLoaded', () => {
const policy = document.getElementById('policy');
const policyReplaced = 'policy_confirm'.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,'\\$1');
const regExp = new RegExp(`(?:^|;)${policyReplaced}=([^;]*)`);
const cookie = document.cookie.match(regExp);
if (cookie[1] === 'Y') {
policy.remove()
return;
}
const policy_box = document.querySelector('div.policy-container');
if (policy_box) {
return;
}
const confirmButton = '<a href="javascript:void(0)" class="policy-confirm"><?php echo $text_btn_privacy; ?></a>';
policy_box.innerHTML = `
<div class="policy-text">
<?php echo ${!navigator.cookieEnabled ? '$text_privacy_enabled;' : '$text_privacy;'} ?>
</div>
<a href="javascript:void(0)" class="policy-confirm"><?php echo $text_btn_privacy; ?></a>
${navigator.cookieEnabled && confirmButton || ''}
`;
setTimeout(() => {
policy.appendChild(policy_box);
policy.classList.add('active');
setTimeout(() => policy.classList.add('activated'), 400);
const policy_confirm = document.querySelector('.policy-confirm');
policy_confirm && policy_confirm.addEventListener('click', () => {
policy.classList.remove('activated');
setTimeout(() => policy.remove(), 300);
document.cookie='policy_confirm=Y; path=/'
})
},100)
})const values = [25, 0, 23, 52, 0, 32];
// Константа, дефолтное значение, показывающее максимальную высоту твоих столбиков, в пикселах
const maxHeight = 300;
const getPixelsFromPercents = (val) => (maxHeight * val / 100) + 'px';
// В цикле где-нибудь запустить и убрать первый индекс
const styles = {
height: getPixelsFromPercents(values[0]),
}
// Осталось куда-нить прикрутить что получилосьconst values = [25, 0, 23, 52, 0, 32]; // Массив процентов для графика
const maxHeight = 300; // Максимальная высота столбца
const getPixelsFromPercents = (val) => (maxHeight * val / 100) + 'px'; // Функция считающая проценты в пикселах
const labels = Array.from(document.querySelectorAll('.recharts-text.recharts-label')); // Массив столбиков
labels
.map((item, index) = > {
// Каждому столбику присваеваем высоту согласно массиву процентов
item.style.height = getPixelsFromPercents(values[index]);
})var selectedId = localStorage.getItem('selectedId');
function setSelectId(id) {
$(".select")
.find("[value=" + selectedId + "]")
.prop("selected", true);
})
}
if (selectedId) {
setSelectId(selectedId);
}
$(".building").on("click", function () {
var id = $(this).attr("data-n");
localStorage.setItem('selectedId', id);
if (id !== selectedId) {
setSelectId(id);
}
});aside {
white-space: nowrap;
}aside {
display: flex;
width: 80%;
height: 110px;
margin: 10px 0px 30px 10%;
border: 1px ridge Grey;
border-radius: 15px;
overflow-x: scroll;
}
aside img {
height: 100px;
margin-top: 5px;
margin-left: 10px;
border-radius: 10px;
border: 1px solid DimGrey;
}.bl:last-child {
margin-right: 0;
}<table cellpadding="0" cellspacing="0" width="100%" background="img/pattern4.png" style="background-position: 10px center"><table cellpadding="0" cellspacing="0" style="width:100%;background-image:url(img/pattern4.png);background-position: 10px center;"><div class="d-flex justify-content-between bg-white mx-1 overflow-hidden" style="height: calc(100vh - 52px)"><div class="d-flex justify-content-between bg-white mx-1" style="height: calc(100vh - 52px); overflow-y: auto;">.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
}
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr 1fr;
}
}.container {
display: flex;
flex-wrap: wrap;
}.container::after {
content: '';
clear: both;
display: table;
}
.container__item {
...
float: left;
}<html>
<head></head>
<body>
<head></head>
<div id="container">
...
</div>
</body>@keyframes fakeborder{
from{
border: none;
transform: scale(1) translate(-50%, -50%);
}to{
border: 3px solid green;
transform: scale(1.5) translate(-50%, -50%);
}
}
.forFakeBorder {
transform-origin: left top;
}