Lawrence William Trigg Lawrence William Trigg - 4 months ago 9
CSS Question

CSS Hover over div to change another div's element

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

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>

Comments