CSS Hover over div to change another div's element - html

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";
}