JQuery:如何在悬停时设置此样式并删除其他样式？ [JSFiddle 里面]

Question

这是 JSFiddle 链接:https://jsfiddle.net/fmdsu9Lo/

我想添加一个悬停功能，以便将鼠标悬停在菜单上将在该菜单选项卡上应用 .current 样式，同时将其从当前打开的选项卡中删除。如何做到这一点？

    $( function() {

        $( 'ul.cola-tabs li' ).click( function() {

            var tabID = $( this ).attr( 'data-tab' );

            $( 'ul.cola-tabs li' ).removeClass( 'current' );
            $( '.tab-content' ).removeClass( 'current' );
            $( this ).addClass( 'current' );
            $( "#"+tabID ).addClass( 'current' );

        });

    });

Answer 1

这样就可以了:

$('ul.cola-tabs').on('click','li',function() {
  $('.tab-content').removeClass('current');
  $("#"+$(this).data('tab')).addClass('current');
}).on('mouseenter', 'li', function(){
  $('ul.cola-tabs li').removeClass('current');
  $(this).addClass('current');
})

$('ul.cola-tabs').on( 'click', 'li', function() {
	$( '.tab-content' ).removeClass( 'current' );
	$( "#"+$(this).data('tab') ).addClass( 'current' );
}).on('mouseenter', 'li', function(){
	$( 'ul.cola-tabs li' ).removeClass( 'current' );
  $( this ).addClass( 'current' );
})

ul.cola-tabs {
		list-style-type: none;
	}

	ul.cola-tabs li {
		display: block;
		margin: 10px 0 0 0;
		padding: 5px 15px;
		border-radius: 7.5px;
		text-decoration: none;
	}

	ul.cola-tabs li:first-child {
		margin: 0;
	}
	
	ul.cola-tabs li:hover {
		cursor: pointer;
	}
	
	ul.cola-tabs li.current {
		background: red;
	}
	
	.tab-content {
		display: none;
	}

	.tab-content.current {
		display: inherit;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cola-tabs">
    <li class="tab-link current" data-tab="tab-1">Apples</li>
    <li class="tab-link" data-tab="tab-2">Oranges</li>
    <li class="tab-link" data-tab="tab-3">Grapes</li>
</ul>

<div id="tab-1" class="tab-content current"> apples </div>
<div id="tab-2" class="tab-content"> oranges </div>
<div id="tab-3" class="tab-content"> grapes </div>