我试图在鼠标悬停时激活一个 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>
最佳答案
您也可以在没有任何 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;
}
关于javascript - 使用鼠标悬停文本链接激活 div 悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20512373/