使用鼠标悬停文本链接激活div悬停

Question

I'm trying to activate a div hover transition on mouse over so that my div will slide down with the text when I hover over "TEXT" but I can't seem to find the solution. 我正在尝试在鼠标悬停时激活div悬停过渡，以便当我将鼠标悬停在“ TEXT”上时div会随着文本向下滑动，但是我似乎找不到解决方法。 I've seen numerous post about using containers for this, but those don't seem to work either. 我已经看过很多关于使用容器来实现此目的的文章，但是它们似乎也不起作用。

        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/ http://jsfiddle.net/jYgAV/2/

Answer 1

You can also do it in pure CSS without any jQuery. 您也可以在没有任何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/ http://jsfiddle.net/pWQ2v/1/

Answer 2

Try this way 试试这个

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

Script 脚本

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

DEMO DEMO

使用鼠标悬停文本链接激活div悬停

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-12-11 07:13:57

解决方案2
0 2013-12-11 06:53:14

使用鼠标悬停文本链接激活div悬停

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-12-11 07:13:57

解决方案2 0 2013-12-11 06:53:14

解决方案1
1 已采纳 2013-12-11 07:13:57

解决方案2
0 2013-12-11 06:53:14