javascript - 如何使信息仅在使用 jquery 和 css 悬停时出现？

Question

我正在尝试创建一个导航，它只会下拉以显示所需的信息，并且效果会略微淡化，但只有当我将鼠标悬停在选择上时才会出现。我不太熟悉 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();

});
});

Answer 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');
});