如何使鼠标输入功能具有淡入淡出效果并保持在那里
how to make mouseenter function with fade in effect and stays there
我想创建一个选项卡,当有人将鼠标悬停在新 ul 下方的某个选项卡上时,应该显示淡入和淡出效果。到目前为止,我已经使用了mouseenter,新的diplay项目应该留在那里以选择其他选项。
.HTML
<ul class="sector-nav">
<li><a href="#" class="residential-main">Residential</a></li>
<li><a href="#"class="commercial-main">Commerical</a></li>
<li><a href="#">Private</a></li>
</ul>
<ul class="res-pro residential-pro">
<li><a href="#">rProject 1</a></li>
<li><a href="#">rProject 2</a></li>
<li><a href="#">rProject 3</a></li>
</ul>
<ul class="com-pro commercial-pro">
<li><a href="#">cProject 1</a></li>
<li><a href="#">cProject 2</a></li>
<li><a href="#">cProject 3</a></li>
</ul>
.JS
$(document).ready(function() { $('.residential-main').mouseenter(function() { $('.residential-pro').show(); }); $('.residential-main').mouseleave(function () { $('.residential-pro').hide(); }); });
$(document).ready(function() { $('.commercial-main').mouseenter(function() { $('.commercial-pro').show(); }); $('.commercial-main').mouseleave(function () { $('.commercial-pro').hide(); }); });
见 jsFiddle
你不需要javascript,因为你只能使用CSS和:hover
伪选择器来完成。
首先,您需要将相关ul
元素设置为父元素的子元素li
:
<ul class="sector-nav">
<li>
<a href="#" class="residential-main">Residential</a>
<ul class="res-pro residential-pro">
<li><a href="#">rProject 1</a></li>
<li><a href="#">rProject 2</a></li>
<li><a href="#">rProject 3</a></li>
</ul>
</li>
<li>
<a href="#" class="commercial-main">Commerical</a>
<ul class="com-pro commercial-pro">
<li><a href="#">cProject 1</a></li>
<li><a href="#">cProject 2</a></li>
<li><a href="#">cProject 3</a></li>
</ul>
</li>
<li><a href="#">Private</a></li>
</ul>
然后修改以下选择器以在悬停时隐藏/显示相关的ul
元素:
.sector-nav > li {
display: inline;
padding-right: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-left: 20px;
position: relative;
}
.sector-nav li > ul {
display: none;
position: absolute;
}
.sector-nav > li:hover > ul {
display: block;
}
示例小提琴
更好的方法是使用CSS。这是带有淡入淡出动画示例的小提琴。
.fadeIn {
border: 1px solid #48484A;
font-size: 18px;
opacity:0;
-webkit-transition : all 2s ease-out;
-moz-transition : all 2s ease-out;
-o-transition : all 2s ease-out;
transition : all 2s ease-out;
}
.thisText:hover .fadeIn {
opacity: 1;
}
但是由于您使用的是JQuery,因此您也可以使用他的fadein函数来提供动画。
下面是 JQuery 文档中的示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
p {
position: relative;
width: 400px;
height: 90px;
}
div {
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (<a href="#">click!</a>)
<div><span>CENSORED!</span></div>
</p>
<script>
$( "a" ).click(function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
return false;
});
</script>
</body>
</html>
有关更多示例,请参阅文档(JQuery 文档)
如果你想
使用js,你的解决方案非常接近。只需替换jquery show,分别用淡入和淡出隐藏,并最初从css中隐藏元素。但是,您还需要修改您的 html,以便子项显示在其父级下。
.HTML
<ul class="sector-nav">
<li class="residential-main"><a href="#">Residential</a><ul class="res-pro residential-pro">
<li><a href="#">rProject 1</a>
</li>
<li><a href="#">rProject 2</a>
</li>
<li><a href="#">rProject 3</a>
</li>
</ul>
</li>
<li class="commercial-main"><a href="#" >Commerical</a>
<ul class="com-pro commercial-pro">
<li><a href="#">cProject 1</a>
</li>
<li><a href="#">cProject 2</a>
</li>
<li><a href="#">cProject 3</a>
</li>
</ul>
</li>
<li><a href="#">Private</a>
</li>
</ul>
.CSS
.sector-nav li {
display: inline;
}
.residential-pro , .commercial-pro{
display:none;
position:absolute;
padding:0;
}
.residential-pro li, .commercial-pro li{
display:block;
}
.JS
$(document).ready(function () {
$('.residential-main,.residential-pro').mouseenter(function () {
$('.residential-pro').stop(false,true).offset({left:$('.residential-main').offset().left}).fadeIn();
});
$('.residential-main').mouseleave(function () {
$('.residential-pro').stop(false,true).fadeOut();
});
});
$(document).ready(function () {
$('.commercial-main,.commercial-pro').mouseenter(function () {
$('.commercial-pro').stop(false,true).offset({left:$('.commercial-main').offset().left}).fadeIn();
});
$('.commercial-main').mouseleave(function () {
$('.commercial-pro').stop(false,true).fadeOut();
});
});
http://jsfiddle.net/tEMQj/7/
相关文章:
- EmberJS没有找到任何模型,但它'在那里
- 关于在动态创建的元素中添加预先样式化的类或在那里添加stying&然后
- 如何制作自适应块并在那里添加块
- 嘿,在那里寻找解决方案
- 如何使鼠标输入功能具有淡入淡出效果并保持在那里
- 我可以控制台.debug()并在那里制作Chrome Dev-tools断点吗?
- 转到页面并在那里打开链接,一气呵成
- 无法读取 null 的属性“addEventListener”---但 ID 在那里
- 它在那里查询轮播类似于mootools icarousel
- 从 html5 画布中删除使用 Javascript 放置在那里的图像
- Ruby on Rails - 如何将换行符输入文本区域,以便在显示内容时,换行符也在那里
- 如何修复页面顶部的导航栏并在页面滚动时将其保留在那里
- findOne 抛出未定义,即使数据在那里
- 被jQuery弄糊涂了,当我知道的时候没有找到它'在那里
- 我应该从bower_components复制文件吗?在那里引用它们
- 悬停以显示覆盖-几乎在那里,只需要一些调整
- 我需要制作一个页面,在那里你可以看到评论的开头,但必须点击'点击更多'查看评论的其余部分
- 拉斐尔将元素放在右边,并在那里缩放
- 如何播放jQuery Reel到特定帧并停在那里
- 淡出内容区域,但留下导航栏/页眉&页脚总是在那里