로드 할 div를 숨기고 다른 div의 호버에 표시

-2

div가 있고 그 안에 div가있는 div가 있습니다. 페이지로드시 정보 div (코드에서 볼 수 있음)를 숨기려고합니다. 다음 IMG의 호버 다시 보여 - HTML로드 할 div를 숨기고 다른 div의 호버에 표시

 <div class="wrapper"> 
     <img id="logo" src="img/logo.png" alt="logo"> 
      <div id="info"> 
       info- blah <br> 
       blah &amp; blah .<br> 
       [email protected] 
      </div> 
     </div>

CSS의를 :)

도와 나는 또한 정보 DIV 잘 잘 밀어 싶어 .. 미리 감사

.wrapper{ 
float: left; 
opacity: 0.4; 
margin-top: -30px; 
margin-left: 5px; 
transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    } 
#logo { 
     width: 39px; 
} 
.wrapper:hover{ 
    opacity: 0.6; 
} 
#info { 
    margin-left: 2px; 
    margin-top: 5px; 
    float:right; 
    font-size: 9px; 
}

내가 필요로하는 jQuery는 무엇입니까?

출처

2013-09-21 avisaac

http://jsfiddle.net/AW9qh/그거? –

이것이 다운 된 이유는이 사이트에서이 주제와 관련된 다양한 질문에 대한 답변이 이미 있기 때문입니다. 그게 정말 대단한데, 사람들이 야생에서 겪고있는 문제의 생생한 인터랙티브 위키입니다. 사람들을위한 코드가있는 곳이 아닙니다. 질문을하기 전에, 내 문제는 무엇입니까? 다른 사람들이 비슷한 문제가 있는지 살펴 봅니다. 귀하의 경우 대답은 가장 확실합니다. – Swordfish0321

간단한 질문에 SO 포인트를 만들기위한 코드를 작성하는 대신 * 실제 답변은 CSS 구문 및 구조, 특히 의사 선택기를 살펴 보도록 지시하는 것입니다. 개념은 매우 직설적이며 조금 읽은 후에는 자신의 질문에 쉽게 대답 할 수 있습니다. – Swordfish0321

여기 한 가지 방법이 있습니다. 즉, 당신이 원하는 거라면 는 모르겠지만, 이미 CSS3를 사용하고 있기 때문에, 당신은 그것을 위해 jQuery를 필요가 없습니다

.wrapper { 
    float: left; 
    opacity: 0.4; 
    margin-left: 5px; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    overflow:visible; 
    position:relative; 
} 
.wrapper:hover { 
    opacity: 0.6; 
} 
#info { 
    margin-left: 2px; 
    margin-top: 5px; 
    float:right; 
    font-size: 9px; 
    opacity:0; 
    transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
    left:50%; 
    position:absolute; 
    top:0; 
} 
.wrapper:hover #info { 
    left:100%; 
    opacity:1; 
}

http://jsfiddle.net/Y2B2v/

출처

2013-09-21 21:44:52 Andy

두 가지 의견이 도움이되었습니다. (Andy의 의견은 내가 찾던 효과가 더 많았지 만) 또한 두 가지 모두 div 변경의 위치를 변경했습니다. – avisaac

Ok 나는 postioning을 고칠 수있었습니다. – avisaac

동일한 이미지 높이로 .wrapper을 배치하십시오. 아래에있는 텍스트를 숨기려면 overflow:hidden을 입력하십시오.

.wrapper에서 높이를 변경해야합니다. 마우스를 올려 놓으면 텍스트가 표시됩니다. 당신이 좋은 전환을 원하는 경우에

,이 같은

.wrapper:hover{ 
    opacity: 0.6; 
    height:100px; 
    transition: height 1; 
    -webkit-transition: height 1s; /* Safari */ 
}

와 그것을 조정할 수 있습니다 http://jsfiddle.net/AW9qh/2/

출처

2013-09-21 21:44:20

로드 할 div를 숨기고 다른 div의 호버에 표시

답변

관련 문제