Изменение блоков
Есть несколько block, в них по несколько(не фиксированное количество) element и один element1, нужно чтобы при наведении на любой element element1 в этом же блоке становился такого же размера как и element на который навели а в других block element1 при этом не изменялся.
<div class="block">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element1"></div>
</div>
<div class="block">
<div class="element"></div>
<div class="element"></div>
<div class="element1"></div>
</div>
|
Skarabei007,
размеры element от чего зависят? |
рони,
От содержимого, может быть любым |
<html>
<head>
<style>
.element1{
background-color: green;
}
</style>
</head>
<body>
<div class="block">
<div class="element" style="background-color: yellow;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переулка знаках деревни, на берегу не буквоград первую дал, вопрос возвращайся предупредила приставка маленькая необходимыми дороге, он которое текстами? Они, речью.</div>
<div class="element" style="background-color: orange;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переулка знаках деревни</div>
<div class="element" style="background-color: red;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Пустился образ, путь грамматики приставка власти составитель заглавных вдали по всей маленький пор, предложения свое повстречался до возвращайся? Переулка взгляд, заглавных агенство, переписали, рукописи составитель, вдали от всех правилами коварный рукопись первую силуэт дал меня над рот буквенных жизни. Продолжил, жаренные курсивных предупреждал, обеспечивает ему выйти снова города залетают букв домах маленькая раз там одна ты предложения большого прямо собрал страна что парадигматическая заманивший живет если родного.</div>
<div class="element1"></div>
</div>
<div class="block">
<div class="element">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Толку пор большой использовало рыбными курсивных, буквоград взобравшись путь заглавных что, дал меня буквенных там переулка мир, взгляд запятой, последний своих маленькая приставка. Реторический рыбного даль до если большого пояс несколько, переписывается жизни не что инициал повстречался переписали дороге, себя мир буквоград назад, единственное рукопись великий! Раз обеспечивает рыбными </div>
<div class="element">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свою переписывается ручеек маленькая.</div>
<div class="element1"></div>
</div>
<script>
[].forEach.call(document.querySelectorAll('.element'), function(el){
el.onmouseenter = function(){
[].forEach.call(el.parentNode.children, function(child){
if (child.classList.contains('element1')){
child.style.width = el.clientWidth;
child.style.height = el.clientHeight;
}
});
};
});
</script>
</body>
</html>
|
j0hnik,
Круто, спасибо большое. |
Skarabei007,
как возможный вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".block").on("mouseenter", ".element", function(a) {
a = $(this).css(["width", "height", "background-color"]);
$(this).siblings(".element1").css(a)
})
});
</script>
</head>
<body>
<div class="block">
<div class="element" style="background-color: yellow;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переулка знаках деревни, на берегу не буквоград первую дал, вопрос возвращайся предупредила приставка маленькая необходимыми дороге, он которое текстами? Они, речью.</div>
<div class="element" style="background-color: orange;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переулка знаках деревни</div>
<div class="element" style="background-color: red;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Пустился образ, путь грамматики приставка власти составитель заглавных вдали по всей маленький пор, предложения свое повстречался до возвращайся? Переулка взгляд, заглавных агенство, переписали, рукописи составитель, вдали от всех правилами коварный рукопись первую силуэт дал меня над рот буквенных жизни. Продолжил, жаренные курсивных предупреждал, обеспечивает ему выйти снова города залетают букв домах маленькая раз там одна ты предложения большого прямо собрал страна что парадигматическая заманивший живет если родного.</div>
<div class="element1"></div>
</div>
<div class="block">
<div class="element" style="background-color: #0000FF;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Толку пор большой использовало рыбными курсивных, буквоград взобравшись путь заглавных что, дал меня буквенных там переулка мир, взгляд запятой, последний своих маленькая приставка. Реторический рыбного даль до если большого пояс несколько, переписывается жизни не что инициал повстречался переписали дороге, себя мир буквоград назад, единственное рукопись великий! Раз обеспечивает рыбными </div>
<div class="element" style="background-color: red;">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свою переписывается ручеек маленькая.</div>
<div class="element1"></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:15. |