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>

http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered I think you'll find your answer here :) — Maharkus, Jul 11 '16 at 10:10

score 2 · Accepted Answer · edited Jul 11 '16 at 10:15

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>

score 1 · Answer 2 · answered Jul 11 '16 at 10:15

1

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

answered Jul 11 '16 at 10:15

Mihai T

17,254
2
23
32

Thank you :) and thank you for the extra information, helped a lot! – Jul 11 '16 at 10:22

CSS Hover over div to change another div's element

2 Answers2