CSS Hover over div to change another div's element

Question

So i am trying to change the element of a different div using the :hover effect in CSS.

If you check my code you should understand what I am trying to accomplish.

When you hover over the project button i would like the slider-container to have the text 'projects' and so on for all of the buttons

I understand that the button needs to be before the slider container which it is, so i really don't understand why this is not working?

If anybody could either direct me to a better tutorial on using this hover effect and help me understand what the issue is i would be really appreciative.

Thanks Guys! :)

 #content { position: relative; overflow: hidden; width: 900px; height: 440px; background: #D5D5D5; margin: auto; top: 50px; left: 0; bottom: 0; right: 0; -webkit-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75); box-shadow: 0px 0px 23px 3px rgba(0,0,0,0.75); } .logo-container{ display: flex; flex-direction: row; position: relative; width: 100%; height: 100px; justify-content: center; margin: auto; float: right; top: 0px; } .blockicon { position: relative; width: 50px; height: 50px; top: 15px; border-radius: 50%; border: solid 5px black; cursor: pointer; font-size: 30px; text-align: center; vertical-align: middle; line-height: 50px; margin: 0 0.8%; } .projects { background: #801113; } .projects:hover > .slider-container { background: #801113; } .projects:hover > .slider-container:before { content:"Projects"; } .aboutme { background: #1A8305; } .aboutme:hover > .slider-container { background: #1A8305; } .aboutme:hover > .slider-container:before { content:"About Me"; } .contactme { background: #E8BA1A; } .contactme:hover > .slider-container { background: #E8BA1A; } .contactme:hover > .slider-container:before { content:"Contact Me"; } .helped { background: #0049BB; } .helped:hover > .slider-container { background: #0049BB; } .helped:hover > .slider-container:before { content:"Helped"; } .hobbys { background: #A40CA3; } .hobbys:hover > .slider-container { background: #A40CA3; } .hobbys:hover > .slider-container:before { content:"Hobbys"; } .slider-container { position:absolute; background: #CF4000; width: 95%; height: 320px; margin: auto; top: 400px; left: 0; bottom: 0; right: 0; } .slider-container:before { position:absolute; content:"Test"; font-size: 30px; bottom: 20%; left: 40%; font-family: Aldrich; padding: 0; font-weight: bold; color: white; z-index: 999; } @media screen and (max-width: 900px) { #content { width: 100%; } #content-container { width: 100%; } #footer { width: 100%; } } 

 <div id="content"> <div class="logo-container"> <div class="blockicon projects"> P </div> <div class="blockicon aboutme"> A </div> <div class="blockicon contactme"> C </div> <div class="blockicon helped"> H </div> <div class="blockicon hobbys"> H </div> <div class="slider-container"> </div> </div> </div> 

Answer 1

Just use the general sibling combinator ~ and it will work.

 #content { position: relative; overflow: hidden; width: 900px; height: 440px; background: #D5D5D5; margin: auto; top: 210px; left: 0; bottom: 0; right: 0; -webkit-box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.75); } .logo-container { display: flex; flex-direction: row; position: relative; width: 100%; height: 100px; justify-content: center; margin: auto; float: right; top: 0px; } .blockicon { position: relative; width: 50px; height: 50px; top: 15px; border-radius: 50%; border: solid 5px black; cursor: pointer; font-size: 30px; text-align: center; vertical-align: middle; line-height: 50px; margin: 0 0.8%; } .projects { background: #801113; } .projects:hover ~ .slider-container { background: #801113; } .projects:hover ~ .slider-container:before { content: "Projects"; } .aboutme { background: #1A8305; } .aboutme:hover ~ .slider-container { background: #1A8305; } .aboutme:hover ~ .slider-container:before { content: "About Me"; } .contactme { background: #E8BA1A; } .contactme:hover ~ .slider-container { background: #E8BA1A; } .contactme:hover ~ .slider-container:before { content: "Contact Me"; } .helped { background: #0049BB; } .helped:hover ~ .slider-container { background: #0049BB; } .helped:hover ~ .slider-container:before { content: "Helped"; } .hobbys { background: #A40CA3; } .hobbys:hover ~ .slider-container { background: #A40CA3; } .hobbys:hover ~ .slider-container:before { content: "Hobbys"; } .slider-container { position: absolute; background: #CF4000; width: 95%; height: 320px; margin: auto; top: 400px; left: 0; bottom: 0; right: 0; } .slider-container:before { position: absolute; content: "Test"; font-size: 30px; bottom: 20%; left: 40%; font-family: Aldrich; padding: 0; font-weight: bold; color: white; z-index: 999; } @media screen and (max-width: 900px) { #content { width: 100%; } #content-container { width: 100%; } #footer { width: 100%; } } 

 <div id="content"> <div class="logo-container"> <div class="blockicon projects">P</div> <div class="blockicon aboutme">A</div> <div class="blockicon contactme">C</div> <div class="blockicon helped">H</div> <div class="blockicon hobbys">H</div> <div class="slider-container"> </div> </div> </div> 

Answer 2

see here : jsfiddle

( changed only for .projects )

> means directly the element inside it's parent. for eg : parent > child.

for elements that are siblings like .projects and .slider-container use ~

for eg :

    .projects:hover ~   .slider-container {
        background: #801113;
    }
    .projects:hover ~   .slider-container:before {
        content:"Projects";
    }