CODEWITHSUNDEEP
htmlcss
Raging Vids
Raging Vids

Reputation: 121

Cannot change CSS of a different div

So I have a list of three links that individually get the class name "active" added to them sequentially such that when one link has it, the other two do not. Every link, when the class "active" is added to it, is supposed to add a different background image to the div "boxes". But, the background image is not showing at all.

Everything works except the background image issue commented in the CSS code in three spots as: "cant execute below css on #boxes"

Please help me I really need this :(

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.container{
    width: 100%;
    height: 100vh;
    display:flex;

}
#boxes {
    width: 100%;
    height: 100vh;
}

body ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index:10;
    list-style: none;
}

body ul li a{
    color: red;
    text-decoration: none;
    font-size: 50px;
    transition: color 1000ms;
}



#one.active {
    color:yellow;
}

/*cant execute below css on #boxes*/
#one.active ~ #boxes{
    background: url(img1.jpg) rgba(0, 0, 0, 0.6);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    transition: all 500ms;
}

#two.active {
    color:yellow;
}

/*cant execute below css on #boxes*/
#two.active ~ #boxes{
    background: url(img2.jpg) rgba(0, 0, 0, 0.6);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    transition: all 500ms;
}


#three.active {
    color:yellow;
}

/*cant execute below css on #boxes*/
#three.active ~ #boxes{
    background: url(img3.jpg) rgba(0, 0, 0, 0.6);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    transition: all 500ms;
}
<body>
    <div class="container">
      <ul>
        <li><a id="one" href="#">Image 1</a></li>
        <li><a id="two" href="#">Image 2</a></li>
        <li><a id="three" href="#">Image 3</a></li>
      </ul>
      <div id="boxes"></div>
   </div>


    <script type="text/javascript">
        var i = 0;
        function toggle() {
            var boxes = document.querySelectorAll('#one,#two,#three');

            // add active class to the current box
            boxes[i].classList.add("active");

            // remove active class from the previous one
            if (i === 0) {
                boxes[boxes.length - 1].classList.remove("active");
            } else {
                boxes[i - 1].classList.remove("active");
            }

            i++;

            if (i >= boxes.length) {
                i = 0;
            }
        }

        toggle();
        setInterval(toggle, 1800);
    </script>
</body>

Upvotes: 0

Views: 76

Answers (2)

Iwaniukooo
Iwaniukooo

Reputation: 26

The ~ selector works for elements which share the same parent. The parent of your <a> tags is <li>, whereas the parent of your <div id="boxes"> is <div id ="container">

In order to achieve the target described in your question, you should operate on "active" class, which is associated directly with <div id ="boxes"> instead of having ~ selector stuff

Upvotes: 1

Wiidialga18
Wiidialga18

Reputation: 331

A fast solution is to change the box class according to the time. This means that you should add in the css code

#boxes.box1{..} ... for this to work

function toggle() {
        var boxes = document.querySelectorAll('#one,#two,#three')
        var box = document.getElementById('boxes')

        // add active class to the current box
        boxes[i].classList.add('active')

   //what you can add 
        if (boxes[i].id === 'one') {
          box.classList.add('box1')
          box.classList.remove('box2')
          box.classList.remove('box3')
        } else if (boxes[i].id === 'two') {
          box.classList.add('box2')
          box.classList.remove('box1')
          box.classList.remove('box3')
        } else {
          box.classList.add('box3')
          box.classList.remove('box1')
          box.classList.remove('box2')
        }

        // remove active class from the previous one
        if (i === 0) {
          boxes[boxes.length - 1].classList.remove('active')
        } else {
          boxes[i - 1].classList.remove('active')
        }

        i++

        if (i >= boxes.length) {
          i = 0
        }
      }

Upvotes: 2

Related Questions