我正在尝试创建一个仅下拉以显示所需信息的导航,以及轻微的淡入效果,但仅当我将鼠标悬停在选区上时。我对jquery不太熟悉,但是我的教授给我看了这个代码以达到我想要的效果。我不确定如何只在我将鼠标悬停在效果上时才能使效果有效。
这是我的html代码:
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li class="current">
<a href="#bacon" class="cyan">Terms</a>
</li>
<li>
<a href="#batfish" class="green">Resources</a>
</li>
<li>
<a href="#tuna" class="lav">Culture</a>
</li>
<li>
<a href="#sausage" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="bacon" class="current animated"> <p>Bacon ipsum dolor amet
ribeye short loin leberkas andouille jerky meatloaf pork spare ribs
corned beef. Andouille ham hock ground round, shankle pastrami rump
hamburger filet mignon. </p></div>
<div id="batfish" class="animated"><p>Batfish warmouth orbicular
combtooth blenny; madtom, knifefish handfish rock beauty armorhead
frogfish. Cownose ray pupfish pencilfish char fangtooth marblefish
longfin dragonfish armored searobin hamlet.</p></div>
<div id="tuna" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey
triggerfish mooneye African glass catfish, loach wolf-eel yellowhead
jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder
sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p
</div>
<div id="sausage" class="animated"> <p>Sausage ground round sirloin ham
hock t-bone tongue strip steak meatloaf landjaeger shankle andouille.
Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip
chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
我的css是:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:
border-box; margin: 0; padding: 0; }
#wrap { width: 75%; margin: 0 auto; min-width: 300px; max-width: 1400px; }
#tabwrap {
background: #fff;
overflow: hidden;
width: 100%;
min-height: 300px;
margin: 10px auto;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; background: #777; }
#tabs li { list-style: none; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: #fff;
width: 25%;
text-decoration: none;
text-align: center;
border-right: 1px solid #555;
border-left: 1px solid #888;
font-size: 15px;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: cyan;
color: #666;
}
#tabs li.current a.green{
background-color: rgb(100,200,100);
color: #666;
}
#tabs li.current a.lav{
background-color: rgb(200,200,255);
color: #666;
}
#tabs li.current a.teal{
background-color: rgb(95,200,165);
color: #666;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: #666;
/*text-shadow: 1px 1px 0 #fff;*/
display: none;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { margin: 0 0 20px 0;}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#bacon {
background-color: cyan;
}
#batfish {
background-color: rgb(100,200,100);
}
#tuna {
background-color: rgb(200,200,255);
}
#sausage {
background-color: rgb(95,200,165);
}
我的js是:
$(document).ready(function() {
$('#tabs li a').hover(function(e) {
$('#tabs li, #content
.current').removeClass('current').removeClass
('fadeInLeft');
$(this).parent().addClass('current');
var currentTab = $(this).attr('href');
$(currentTab).addClass('current fadeInLeft');
e.preventDefault();
});
});
答案 0 :(得分:1)
您的悬停功能似乎对输入功能运行正常,但您缺少执行功能。
$('element').hover(function(){
//enter code here
}, function(){
//leave code here
});
尝试这样的事情:
$('#tabs li a').hover(function(e) {
$('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
$(this).parent().addClass('current');
var currentTab = $(this).attr('href');
$(currentTab).addClass('current fadeInLeft');
e.preventDefault();
}, function(){
$('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
});