Скрыть div при загрузке и показать его при наведении на другой div

-2

У меня есть div, у которого есть img с id и другим div внутри него Я хочу скрыть информацию div (вы можете видеть в коде) при загрузке страницы а затем показать его снова при наведении курсора мыши на IMG - Я также хочу инфо ДИВ скользить вправо красиво .. заранее спасибо за помощь :)Скрыть div при загрузке и показать его при наведении на другой div

в HTML

 <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

.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/как это? –

Причина, по которой этот голос проголосовали, заключается в том, что на этом сайте уже имеется множество ответов на вопросы, связанные с этой темой. Это то, что делает SO awesome, это живой интерактивный вики проблем, с которыми люди сталкиваются в дикой природе. Не место, где у вас есть люди для вас. Прежде чем задавать вопрос, подумайте, в чем моя проблема? Давайте посмотрим, были ли у других проблемы схожие. В вашем случае ответ, безусловно, да. – 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

оба ваших комментария помогли (хотя комментарий Энди был больше того эффекта, который я искал). Но и оба из них сделали положение div измененным ... – avisaac

Хорошо, я смог исправить положение: «Большое спасибо! – 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

ответ

Смежные вопросы