2016-07-11 9 views
0

したがって、CSSで:hoverエフェクトを使用して別のdivの要素を変更しようとしています。CSS別のdivの要素を変更するにはdivに移動します

私のコードをチェックすれば、私が達成しようとしていることを理解する必要があります。

あなたは私がテキストのプロジェクト」を持つようにスライダーコンテナが好きなので、上のボタン

のすべてのためになり、プロジェクトのボタンの上に置くと、私はボタンがどのスライダーコンテナの前にする必要があることを理解しそれは、私は本当になぜこれが動作していないのか分からないのですか?

誰かがこのホバー効果の使用に関するより良いチュートリアルを指示することができ、私が本当に感謝している問題を理解するのを手伝ってもらえますか。

ありがとうございました! :)

#content { 
 
    position: relative; \t 
 
    overflow: hidden; 
 
    width: 900px; 
 
    height: 440px; 
 
    background: #D5D5D5; \t 
 
    margin: auto; 
 
    top: 50px; left: 0; bottom: 0; right: 0; \t 
 
    -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; \t 
 
    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 > \t .slider-container { 
 
    background: #801113; 
 
} 
 
.projects:hover > \t .slider-container:before { 
 
    content:"Projects"; 
 
} 
 
.aboutme { 
 
    background: #1A8305; 
 
} 
 
.aboutme:hover > \t .slider-container { 
 
    background: #1A8305; 
 
} 
 
.aboutme:hover > \t .slider-container:before { 
 
    content:"About Me"; 
 
} 
 
.contactme { 
 
    background: #E8BA1A; \t \t \t 
 
} 
 
.contactme:hover > \t .slider-container { 
 
    background: #E8BA1A; 
 
} 
 
.contactme:hover > \t .slider-container:before { 
 
    content:"Contact Me"; 
 
} 
 
.helped { 
 
    background: #0049BB; 
 
} 
 
.helped:hover > \t .slider-container { 
 
    background: #0049BB; 
 
} 
 
.helped:hover > \t .slider-container:before { 
 
    content:"Helped"; 
 
} 
 
.hobbys { 
 
    background: #A40CA3; \t 
 
} 
 
.hobbys:hover > .slider-container { 
 
    background: #A40CA3; 
 
} 
 
.hobbys:hover > \t .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%; \t 
 
    } 
 
    #footer { 
 
    width: 100%; \t 
 
    } 
 
}
<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>

+1

http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-あなたがここであなたの答えを見つけるだろうと思うときに: – Maharkus

答えて

3

ただ、一般的な兄弟コンビネータ~を使用して、それが動作します。

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

+0

ありがとう! :)完璧に動作します! –

+0

うれしい私は助けることができました! :) – thepio

2

こちらを参照してください。jsfiddle

(のみ.projectsに変更)

>は、それは親の内部で直接要素を意味します。例:parent> child。例えばのため.projects.slider-container使用~

のような兄弟である要素について

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

ありがとう:)と追加情報をありがとう、たくさんの助けて! –

関連する問題