Question

所以我试图使用CSS中的hover效果来改变不同div的元素。

如果你检查我的代码，你应该明白我想要完成的任务。

当您将鼠标悬停在项目按钮上时，我希望滑块容器包含文本＆＃39; projects＆＃39;等等所有按钮

我知道按钮需要在滑块容器之前，所以我真的不明白为什么这不起作用？

如果有人能指导我使用这种悬停效果的更好的教程，并帮助我理解问题是什么，我会非常感激。

谢谢大家！：）

＆＃13;

#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%;	
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

只需使用通用兄弟组合器~即可。

#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

请参阅此处： jsfiddle

（仅针对.projects更改）

>直接表示其父元素内的元素。例如：父母＆gt;子。

对于像.projects和.slider-container这样的兄弟元素使用~

例如：

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

CSS将鼠标悬停在div上以更改另一个div的元素

2 个答案: