As you can see, I have 8 project-box blocks of class to which the onmouseover effect should be applied . I broke my head for a very long time but still did not understand how to do it when pointing to any of the blocks
background parent element (intro) changed
despite the fact that each block should have its own picture, that is, if you hover over the first block, the link should be shown in the variable bg1, if the second is bg2 and so on. Options via CSS also jQuery do not need easy solutions, please do not offer. I also had the option to solve this problem in this way to give an id to each block and hang up such a function for each block
let imgHolder = "assets/blue.jpg"; // ссылка на картинку let projectBox = document.getElementById("#project-box-1");//берем все блоки куда будем Ховерить через İD projectBox.onmouseover = () => { intro.style.backgroundImage = imgHolder; } But this way it is impossible to repeat 8 times this function needs a more flexible version.
Here is my code.
let bg1 = "url('https://cdn.allwallpaper.in/wallpapers/1920x1080/2939/architecture-interior-design-kitchen-living-room-1920x1080-wallpaper.jpg')"; let bg2 = "url('https://www.hillhouseinteriors.com/images/hillhouse-interiors-design/hillhouse-interiors-design-4.jpg')"; let bg3 = "url('http://www.catalysticmedia.com/wp-content/uploads/2017/11/modern-tv-rooms-design-with-ideas-hd-images-home-mariapngt.jpg')"; let bg4 = "url('https://i.pinimg.com/originals/36/c4/e6/36c4e61a3993e5b4f16e810cc5ce7935.jpg')"; let bg5 = "url('http://www.3dpower.in/images/Interior%20Design/full/3d-designing-services-bedroom-interior-design.jpg')"; let intro = document.querySelector(".intro"); let projectBox = document.querySelectorAll(".project-box"); for (let i = 0; i < projectBox.length; i++) { projectBox[i].addEventListener('mouseover', function () { intro.style.backgroundImage = bg1; }); } .intro { display: flex; flex-basis: 100%; padding-top: 11.3rem; padding-bottom: 7rem; background-image: url("http://paul-themes.com/html/inter/images/bg/bg2-4.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; transition: 0.5s ease; } .col-project-box { margin-top: 30px; } .project-box { padding-bottom:75%; display: block; position: relative; border:1px solid #fff; transition: all 0.3s ease; } .project-box:hover { background: #333; text-decoration: none; border-color: transparent; outline: none; } .project-box-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 2.14rem 1.928rem; } .project-box h5 { margin: 0; color: #fff; } .project-category { color: #cccccc; margin-top: 0.5rem; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row parent-intro"> <div class="intro"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="title-uppercase" style="color:#fff;">latest projects</h2> <div class="row-project-box row"> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> <div class="col-project-box col-sm-6 col-md-4 col-lg-3 col-xl-3"> <a href="#" class="project-box"> <div class="project-box-inner"> <h5>UCAM Minimalist Apartment</h5> <div class="project-category"></div> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> 
