Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2018, 00:38
Новичок на форуме
Отправить личное сообщение для wayrus161 Посмотреть профиль Найти все сообщения от wayrus161
 
Регистрация: 31.08.2018
Сообщений: 2

Замыливание нескольких div-ов при наведении на один из элементов
Доброго времени суток, дорогие форумчане!

Я недавно занялся версткой и возник у меня такой вопрос:
как реализовать замыливание нескольких других элементов при наведение на определенный элемент?

Прошу прощения за тупость, но я пока новичок в этом :
Может это возможно сделать и средствами CSS?)
Вообщем, буду очень благодарен за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2018, 01:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

css hover sun light js
wayrus161,
5 приемов работы с CSS, о которых вам следует знать
4. Контент, вырванный из контекста

<!DOCTYPE html>
<html lang="en" >

<head>

    <meta charset="UTF-8">
   <title>CodePen - Flashlight effect</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


<style>
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Sawarabi Mincho', sans-serif;
}
body {
    background: #302015;
    overflow: hidden;
    position: relative;
}
.custom-grid {
    position: relative;
    max-width: 50rem;
    margin: 2rem auto;
    text-align: center;
}
.custom-grid > .item {
    display: inline-block;
    margin: .4rem .2rem;
    border: 2px solid #BA8E59;
}
.custom-grid > .item > .text {
    position: relative;
    z-index: 1;
    color: #eee;
    padding: 1rem;
}
.shadow {
    transition: opacity .3s;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200vh;
    width: 200vw;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: radial-gradient(circle at center, transparent 0%, transparent 5%, #302015 10%, #150E09 100%);
}
.shadow.min  {
    opacity: 0;
}

</style>


</head>

<body translate="no" >


<div class="custom-grid" id="js-grid">
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="item">
        <div class="text">Lorem ipsum dolor sit amet</div>
    </div>

</div>
<div class="shadow min"></div>
<script >

var shadow = document.querySelector('.shadow');
document.addEventListener('mousemove', function (e) {
        if(e.target.closest('.custom-grid')) {
         shadow.classList.remove("min");
         window.requestAnimationFrame(function () {
                shadow.style.left = e.clientX + 'px';
                shadow.style.top = e.clientY + 'px';
        });
        }
        else shadow.classList.add("min");
});

</script>
</body>

</html>

Последний раз редактировалось рони, 31.08.2018 в 01:43.
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2018, 07:20
Новичок на форуме
Отправить личное сообщение для wayrus161 Посмотреть профиль Найти все сообщения от wayrus161
 
Регистрация: 31.08.2018
Сообщений: 2

Спасибо большое))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена изображений при наведении и фиксация при клике Noonf Общие вопросы Javascript 3 20.01.2018 17:18
Как реализовать скрытие определённых элементов при клике на один из них tupoimudak2 Элементы интерфейса 10 17.06.2017 11:39
Как при изменении div class выполнять анимацию у дочерних элементов? Aleksanderj Элементы интерфейса 6 10.09.2015 18:49
Расшрение DIV при наведении мыши. OD_RS Элементы интерфейса 1 27.05.2013 21:49
Отображение фото при наведении OnOff jQuery 2 11.04.2012 16:18