Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 29.09.2017
Сообщений: 29
1

Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них

01.02.2018, 02:08. Просмотров 913. Ответов 6
Метки нет (Все метки)

Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них?

Добавлено через 1 час 12 минут
Использую CSS. Блоки span объединять нельзя. Желательно заменить на div.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
        span:hover{
            opacity:0;
            animation:hidden 2s;
        }
        @keyframes hidden{
            from{opacity:1}
            to{opacity:0}
        }
    </style>
</head>
 
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</span>
Text
 
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</span>
Text
 
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</span>
Text
</body>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.02.2018, 02:08
Ответы с готовыми решениями:

Как при наведении на ссылку или иконку сделать так что бы несколько блоков сдвинулись?
Здравствуйте форумчане, помогите пожалуйста. Как при наведении на ссылку или иконку сделать так...

Создать круг разделенный на 6 блоков, в центре логотип, при наведении на один из блоков он увеличивается
Доброго времени суток. Не знаю, как даже искать похожее. В общем нужно создать круг разделен на 6...

Несколько блоков используют один класс, как сделать разные отступы?
Есть виджет (таблица) имеет стили выводится в 3 разных местах соответственно применяются общие...

Двигаются дивы при наведении на один из них
Всем привет! Столкнулся с проблемкой. В общем у меня выводятся товары... при наведении на один из...

6
0 / 0 / 0
Регистрация: 27.01.2018
Сообщений: 65
01.02.2018, 15:07 2
Если блоки независимы, то через CSS не получится. А в JavaScript легко делается
0
0 / 0 / 0
Регистрация: 29.09.2017
Сообщений: 29
02.02.2018, 03:59  [ТС] 3
Step01, подскажите код на JS.
0
85 / 67 / 25
Регистрация: 09.10.2017
Сообщений: 199
02.02.2018, 09:50 4
Здравствуйте!

Блоки должны исчезать (тогда место на станице остаётся) или не отображаться?
Должны ли блоки появляться?

Возможно подойдёт такой вариант:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<script>
function dsplnone(){
 
  var elements = document.getElementsByTagName('div');
 
  for (var i = 0; i < elements.length; i++) {
  
    elements[i].style.opacity = 0;
    elements[i].style.animation = "hidden 2s";
 
  }
}
</script>   
</head>
 
<body>
<div onmouseover="dsplnone()">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</div>
Text
 
<div onmouseover="dsplnone()">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</div>
Text
 
<div onmouseover="dsplnone()">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quas est eius exercitationem modi provident officia facilis beatae nihil eveniet minus eligendi laborum dicta ab sequi. Fuga ipsa excepturi nihil.</div>
Text
</body>
</html>
ps если вместо
HTML5
1
2
    elements[i].style.opacity = 0;
    elements[i].style.animation = "hidden 2s";
написать, то блоки не будут отображаться после наведения
HTML5
1
    elements[i].style.display = 'none';
0
0 / 0 / 0
Регистрация: 27.01.2018
Сообщений: 65
02.02.2018, 11:36 5
Лучше присвоить класс всем блокам, которые должны изчезать. Ведь на странице, скорее всего, будут другие блоки. Поиск элементов производить по классу
Javascript
1
var element = document.getElementsByClassName('класс')
0
346 / 107 / 20
Регистрация: 08.01.2015
Сообщений: 1,157
Записей в блоге: 1
02.02.2018, 15:25 6
Цитата Сообщение от TinSemenova Посмотреть сообщение
написать, то блоки не будут отображаться после наведения
Так нежелательно. После наведения блок исчезнет. Стало быть, исчезнет и наведение на него. После чего блок... появится. Если указатель мыши не убран - он вновь начнет исчезать. И т.д. - с частотой сколько-то раз к секунду. Я сам с этим сталкивался.
Цитата Сообщение от TinSemenova Посмотреть сообщение
elements[i].style.display = 'none';
- так не стоит. Лучше делать блок остающимся на месте, но - незаметным, т.е. делать прозрачным всё: текст, фон, границы.
0
38 / 37 / 26
Регистрация: 05.01.2018
Сообщений: 259
02.02.2018, 15:35 7
С использованием JS, но в данном случае блоки исчезают полностью со страницы.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="33.js" defer ></script>
    <link rel="stylesheet" href="33.css" id="">
</head>
<body>
<div name ="one" id="first"></div>
<div name ="one" id="second"></div>
<div name ="one" id="third"></div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#first {
    background: yellow;
    border: solid black 1px;
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    margin-left: 25px;
}
#second {
    background: green;
    border: solid black 1px;
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    margin-left: 25px;
}
#third {
    background: blue;
    border: solid black 1px;
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    margin-left: 25px;
}
Javascript
1
2
3
4
5
6
7
8
  function change() {
        this.style.display = "none";
  }
    var block = document.getElementsByName ("one");
    for (var i = 0; i < block.length; i++){
        var mass = block[i];
         mass.onmouseenter = change;
    }
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.02.2018, 15:35

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

Плагин для всплывающих/исчезающих блоков
Помогите найти плагин вордпресс для создания вот такого блока (как в примере) один открыт,...

Как сделать так, чтоб при наведении на блок всплывал еще один блок?
Всем привет, подскажите пожалуйста как можно сделать вот такой блок ...

При выборке одна и та же строка выводится несколько раз. Как сделать чтобы один?
Считываем журнал безопасности в Базу данных так сказать онлайн и в textbox записываем выборки и он...

Как сделать несколько активных блоков?
Доброго времени суток...сразу сори если вопрос туповат...только начинаю осваивать верстку ...

подскажите пожалуйста как называется элемент отображениея блоков при наведении
нашел psd макет, и там есть вот такой элемент, что показан на картинке, и так как я только начал...

Как объединить несколько полигонов и создать из них один объект
Как объединить несколько полигонов(например острова), создать из них один объект, а потом добавить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.