하나의 클래스가 다른 클래스 호버에 나타나게하기

안녕하세요. 전체 너비의 이미지 막대를 만들려고합니다. 하나의 이미지가 올려지면 그 이미지에 관한 텍스트를 막대 아래에 표시하고 싶습니다.하나의 클래스가 다른 클래스 호버에 나타나게하기

<div class="everything-container"> 
    <div class="pic-container"> 
    <img class="pic one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> 
    </div> 
    <div class="info-container"> 
    <div class="name"> 
     <p class="glenn name">Glenn</p> 
    </div> 
    <div class="title"> 
     <p class="glenn title">Part Owner/ Senior Inspector</p> 
    </div> 
    <div class="bio"> 
     <p class="glenn bio">My name is Glenn and I am amazing.</p> 
    </div> 
    </div> 
</div>

.everything-container { 
    height: 500px; 
    width: 100%; 
    border: 2px solid black; 
} 
.pic-container { 
    width: 100%; 
    height: 100px; 
    border: 2px solid green; 
} 
.info-container { 
    width: 100%; 
    height: 400px; 
    border: 2px solid red; 
} 
.name { 
    height: 400px; 
    width: 25%; 
    border: 2px solid yellow; 
    float: left; 
    text-align: center; 
    font-size: 120%; 
    font-family: "Open Sans"; 
    font-weight: bold; 
    color: black; 
} 
.title { 
    height: 400px; 
    width: 20%; 
    border: 2px solid blue; 
    float: left; 
    text-align: center; 
    font-size: 90%; 
    text-decoration: italic; 
    color: grey; 
    font-family: "Open Sans"; 
} 
.bio { 
    height: 400px; 
    width: 55%; 
    border: 2px solid orange; 
    float: left; 
    font-size: 100%; 
    text-align: center; 
    color: black; 
    font-family: "Open Sans"; 
} 
.pic { 
    height: 100px; 
    width: 100px; 
    float: left; 
}

나는 내 이미지 중 하나를 "하나"의 클래스를주고 내가 그것을 마우스를 가져 가면 내가 '글렌'의 클래스에 아무것도를 원하는 : 지금까지 나는 다음과 같은 HTML과 CSS를 나타나다. .one : hover .glenn {stuff}을 사용하면 작동하지 않습니다. 가능한가요? 고맙습니다!

출처

2016-07-21 skyleguy

HTML 구조를 사용하면 JS 또는 일부 해킹을 사용해야 할 것입니다. –

나는 이것이 당신이 자바 스크립트없이 얻을 수있는 가장 가까운 두려워 :

<div class="everything one"> 
    <div class="image"> 
    <img src="..." /> 
    </div> 
    <div class="info"> 
    Name 
    Title 
    Details 
    </div> 
</div>

CSS :

.everything .info { 
opacity: 0; 
} 

.everything:hover .info { 
opacity: 1; 
}

출처

2016-07-21 18:18:21 Toby

JS와 관련하여 많은 경험이 없지만 쉽게 될 수 있을까요? – skyleguy

이것은 자바 스크립트가 아닌 접근법입니다. 코드에서 삭제하십시오. – Toby

사진이 하나 뿐이므로 사진이 더 추가되므로 사진이 더 이상 표시되지 않습니다. 사진을 추가 할 때 다른 사진 위에 마우스를 올리면 정보가 필요하지 않습니다. – skyleguy

".one : hover .glenn"을 작동 시키려면 'glenn'클래스가있는 모든 것이 클래스 'one'이있는 요소 내부에 있어야합니다.

당신이 이것을 달성 할 수 없다면 아마도 자바 스크립트와 함께 가야합니다.

출처

2016-07-21 18:14:00

javasript에서 많은 경험이 없지만 쉽게 될 수 있을까요? ( '' –

.info-container { 
    display: none; 
} 

.pic-container:hover + .info-container { 
    display: block; 
}

이 가장 쉬운 방법입니다 :

때문에 JavaScript가 필요하지 않습니다.
HTML과 함께 작동하기 때문에 구성이 필요하지 않습니다.

출처

2016-07-21 18:18:50 xXDarioXx

하나의 클래스가 다른 클래스 호버에 나타나게하기

답변

관련 문제