20.08.2017, 18:37
|
|
Новичок на форуме
|
|
Регистрация: 20.08.2017
Сообщений: 3
|
|
|
Изменение блоков
Есть несколько 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>
|
|
20.08.2017, 19:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Skarabei007,
размеры element от чего зависят?
|
|
20.08.2017, 20:03
|
|
Новичок на форуме
|
|
Регистрация: 20.08.2017
Сообщений: 3
|
|
|
рони,
От содержимого, может быть любым
|
|
20.08.2017, 20:16
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<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, 20.08.2017 в 20:20.
|
|
20.08.2017, 20:24
|
|
Новичок на форуме
|
|
Регистрация: 20.08.2017
Сообщений: 3
|
|
|
j0hnik,
Круто, спасибо большое.
|
|
20.08.2017, 20:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
|
|
