激活與鼠標懸停文本鏈接一個div懸停

我試圖激活過來，讓鼠標一個div懸停過渡，我的div會滑下與文本，當我將鼠標懸停在「TEXT」，但我似乎無法找到解。我已經看過很多關於使用容器的文章，但這些文章似乎也沒有用。激活與鼠標懸停文本鏈接一個div懸停

 h1 { 
      text-align: left; 
      font-size:80px; 
      font-family: Arial Black; 
      color: red; 
      } 


     a { 
      color: red; 
      text-decoration: none; 
      } 

     a:hover{ 
     opacity: .6 
      } 


     div { 
     float: right; 
     font:12pt Arial; 
     width:700px; 
     height:0px; 
     color:black; 
     background: pink; 
     transition: height .7s; 
     -webkit-transition: height .7s; /* Safari */ 
      } 
     div:hover{ 
     height:800px; 
      } 

     </head> 
     </style> 
     <body> 

     <h1> 
     <a onMouseOver = "document.getBlockElementById('div').style.display='';" 
      onMouseOut="document.getBlockElementById('div').style.display='none';" 
      href="" hover ="return false;" style="color:#ff0000;text-decoration:none;">ART</a> 
     <div class = "div"> 
     <span>Lorem ipsum dolor sit amet, mei ne consequat cotidieque. 
     Sit ut zril eirmod, accusam voluptatum interesset no sit. 
     Id per mollis sadipscing. Ut homero possim consequuntur ius, 
     id soluta meliore dissentiet nec. 
     His errem corpora no, audire consulatu ea mea. Omnes petentium 
     vel eu. Usu oblique voluptatibus ut, nullam consectetuer 
     voluptatibus ius an. Eu vero utroque cum, at case tractatos 
     prodesset eum. Ex animal equidem evertitur duo. 
     Falli errem graece qui in, vim petentium efficiendi ad, usu 
     etiam ornatus iracundia id. In nec clita putant facilis, ne 
     mundi nonumy adipiscing est. Ad diam dolore verterem vel, eam 
     et malorum pericula scripserit. Eam cu euismod adipiscing 
     repudiandae, te mazim omnes eam, stet duis ea mel. Ne iusto 
     recteque pro, est te eleifend consequat voluptatibus. 
     Sit ea wisi eripuit. In summo facilis sadipscing vel, 
     vim consetetur scripserit ad. An sit eirmod euripidis. 
     Ad nam persecuti necessitatibus, eu choro sanctus vim, id 
     pri enim fierent euripidis. Illum utinam mei in, nec te 
     dolorem voluptatum efficiantur, duo eius necessitatibus an. 
     Persius veritus ei vim, vel eu alii dolor. Ei vix malorum 
     dolorem tractatos, vide adhuc probatus mea ex, nam omnis 
     ipsum splendide ut. At vim integre percipitur quaerendum, 
     qui dicant laoreet pertinacia ei. At erat minim copiosae ius, 
     te assum corrumpit ius, an has fabellas vituperata. Clita dictas 
     duo ut. Quot essent numquam ea per, nominati electram in pro. 
     </span> 
     </div> 


     </h1> 

     </body> 
     </html>

http://jsfiddle.net/jYgAV/2/

來源

2013-12-11 Xavier Gilmore

你也可以在沒有任何jQuery的情況下用純CSS來做。

<a class="a-trigger">TEXT</a> 
<div class="a-slide-down"> 
    <div class="text">Lorem ipsum dolor text</div> 
</div> 
a.a-trigger{ 
    color:red; 
    font-weight:bold; 
    font-family:Arial; 
    font-size:100px; 
} 
div.a-slide-down{ 
    -webkit-transition:all 0.6s ease-in-out; 
    position:relative; 
display:block; 
height:0; 
overflow:hidden;  
} 
a.a-trigger:hover ~ .a-slide-down{ 
    height:400px; 
} 
a.a-trigger:hover ~ .a-slide-down .text{ 
    margin-top:0px; 
} 
.a-slide-down .text{ 
    margin-top:-400px; 
    -webkit-transition:all 0.6s ease-in-out; 
}

http://jsfiddle.net/pWQ2v/1/

來源

2013-12-11 07:13:57

這是我唯一的CSS解決方案：http://jsfiddle.net/jYgAV/4/，但我更喜歡你的。 – RustyToms

謝謝，主席先生。我完全按照你的方式做了，但是這並沒有給我帶來滑動效果。 –

這很有趣，因爲我沒有得到您的代碼Lokesh Suthar的滑動效果，但我確實通過RustyToms的代碼得到了它。 –

嘗試這種方式

HTML

<a id="sc" style="color:#ff0000;text-decoration:none;">TEXT</a> 
    <div style="display:none"> 
     <span>Lorem ipsum dolor sit amet, mei ne consequat cotidieque. 
Sit ut zril eirmod, accusam voluptatum interesset no sit. 
Id per mollis sadipscing. Ut homero possim consequuntur ius, 
id soluta meliore dissentiet nec. 
His errem corpora no, audire consulatu ea mea. Omnes petentium 
vel eu. Usu oblique voluptatibus ut, nullam consectetuer 
voluptatibus ius an. Eu vero utroque cum, at case tractatos 
prodesset eum. Ex animal equidem evertitur duo. 
Falli errem graece qui in, vim petentium efficiendi ad, usu 
etiam ornatus iracundia id. In nec clita putant facilis, ne 
mundi nonumy adipiscing est. Ad diam dolore verterem vel, eam 
et malorum pericula scripserit. Eam cu euismod adipiscing 
repudiandae, te mazim omnes eam, stet duis ea mel. Ne iusto 
recteque pro, est te eleifend consequat voluptatibus. 
Sit ea wisi eripuit. In summo facilis sadipscing vel, 
vim consetetur scripserit ad. An sit eirmod euripidis. 
Ad nam persecuti necessitatibus, eu choro sanctus vim, id 
pri enim fierent euripidis. Illum utinam mei in, nec te 
dolorem voluptatum efficiantur, duo eius necessitatibus an. 
Persius veritus ei vim, vel eu alii dolor. Ei vix malorum 
dolorem tractatos, vide adhuc probatus mea ex, nam omnis 
ipsum splendide ut. At vim integre percipitur quaerendum, 
qui dicant laoreet pertinacia ei. At erat minim copiosae ius, 
te assum corrumpit ius, an has fabellas vituperata. Clita dictas 
duo ut. Quot essent numquam ea per, nominati electram in pro. 
</span> 
</div>

腳本

$(window).load(function(){ 
$('#sc').hover(function(){ 
     $('div').slideToggle('slow'); 
}); 
});

DEMO

來源

2013-12-11 06:53:14

你也對這個使用jquery？ –

是的，我used.jquery使這很容易，你只是包括這個頭''' –

由於某些原因，此源代碼在文本處理程序中註冊。 –

激活與鼠標懸停文本鏈接一個div懸停

回答

相關問題