[英]show div and execute CSS animation in separate div on “li hover”
I am trying to show a css animation when hovering on nav li a
. 当我将鼠标悬停在nav li a
上时,我试图显示css动画。 So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. 到目前为止,我已经尝试了几个不同的示例来说明如何显示和隐藏来自不同元素的信息,但是可以使我的工作正常进行。 Here is the CSS and HTMl, I do not provide any jS
or jQuery
since I could get any to work but below you have a jsfiddle
ready to go. 这是CSS和HTMl,我没有提供任何jS
或jQuery
因为我可以使用任何jS
或jQuery
,但在下面,您可以使用jsfiddle
。 All help highly appreciated. 所有帮助高度赞赏。
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
@-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
@-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
@-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
@keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink"><a href="#">Home</a></li>
<li class="navLink"><a href="#">Away</a></li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
You can use jQuery to trigger the CSS3 animation with a class change : 您可以使用jQuery通过更改类来触发CSS3动画:
CSS : CSS:
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
@-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
@-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
@-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
@keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery : jQuery的:
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. 您可以尝试使用此jQuery。 You just have to modify it to your needs... but this should get you started. 您只需要根据需要对其进行修改即可,但这应该可以帮助您入门。
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works. 如果将其放在jsFiddle的javascript部分中,它将起作用。
You have to add style for div box as 您必须为div 框添加样式
<div class="box" style="display:none">
and add following javascript code: 并添加以下javascript代码:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle 查看更新的小提琴: 更新的小提琴
There you go :). 你去了:)。 assumes jquery is up and running! 假设jQuery已启动并正在运行!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. 最初会隐藏div,并在悬停时将其淡入和淡出。 Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. 与其他解决方案相比,这还需要在不不更改动画的情况下从一个链接悬停切换到另一个链接。 totally smooth... ;) 完全光滑...;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately! 只需选择jQuery 2.1并将其粘贴到您的jsFiddle中,即可立即使用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.