CSS懸停在div上以更改另一個div的元素

Question

因此，我正在嘗試使用CSS中的：hover效果更改其他div的元素。

如果檢查我的代碼，您應該了解我要完成的工作。

當您將鼠標懸停在項目按鈕上時，我希望滑塊容器的所有按鈕都帶有文本“項目”，依此類推

我知道按鈕必須在它所在的滑塊容器之前，所以我真的不明白為什么這不起作用？

如果有人可以指導我獲得使用此懸停效果的更好的教程，並幫助我了解問題所在，我將非常感激。

多謝你們！ :)

 #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

只需使用通用的同級組合器~ 。

 #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更改）

>直接表示其父元素中的元素。 例如：parent> child。

對於像.projects和.slider-container類的兄弟元素使用~

例如：

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