javascript - 悬停时显示选项卡式内容

Question

我正在尝试创建一个模块，当用户将鼠标悬停在 .header 上时，右侧的图像将会改变。类似于 this page 上的“探索收藏”模块的内容.

使用我目前的方法，我遇到了以下问题:

1. 悬停在非事件 .header(即下面演示中的“header 2”)时，我希望用红色圆圈替换黄色圆圈。
2. 将鼠标悬停在“header 2”上时，“header 1”也仍然处于事件状态(显示 .active 样式)。

当前方法:

$(document).ready(function(){
	
	$('.tabs__li .header').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('.tab__item').removeClass('active');

		$(this).addClass('active');
		$("#"+tab_id).addClass('active');
	})

	// add class .active on li hover
	$('.tabs__li').mouseenter(function () {
		$('.tab__item').addClass('active');
	});

})

ul.tabs {
  margin: 0;
  padding: 0;
}

span.header{
  color: #ABABAB;
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
}

.tab__item.active .header{
  color: #454544;
}

span.header:hover{
   color: #454544;
}

.tabbed__left,
.tabbed__right {
   flex-basis: 50%;
}

.tabbed__right{
    display: none;
    min-height: 325px;
    background-repeat: no-repeat;
    background-size: contain;
}
.active .tabbed__right{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<div class="tabbed">

  <ul class="tabs d-flex flex-column justify-content-between">
  
    <div class="tab__item d-flex flex-row active">
      <div class="tabbed__left"><li class="tabs__li" data-tab="tab-1"><span class="header">Header 1</span></li></div>
      <div class="tabbed__right" id="tab-1" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>
      
    <div class="tab__item d-flex flex-row">
      <li class="tabs__li" data-tab="tab-2"><span class="header">Header 2</span></li>
      <div class="tabbed__right" id="tab-2" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>
    
  </ul>
  
</div>

JSFiddle here for demo

Answer 1

您没有在您的方法中引用您当前悬停的元素，而是只是将 active 类应用于每个元素。

您可以删除所有元素的事件类，然后将它应用到引用 this(触发事件处理程序的元素)的元素:

$(document).ready(function() {

  $('.tabs__li .header').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('.tab__item').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  })

  // add class .active on li hover
  $('.tabs__li').mouseenter(function() {
    $('.tab__item').removeClass('active');
    $(this).parents('.tab__item').addClass('active');
    // or alternatively 
    // $(this).closest('.tab__item').addClass('active');

  });

})

ul.tabs {
  margin: 0;
  padding: 0;
}

span.header {
  color: #ABABAB;
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
}

.tab__item.active .header {
  color: #454544;
}

span.header:hover {
  color: #454544;
}

.tabbed__left,
.tabbed__right {
  flex-basis: 50%;
}

.tabbed__right {
  display: none;
  min-height: 325px;
  background-repeat: no-repeat;
  background-size: contain;
}

.active .tabbed__right {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<div class="tabbed">

  <ul class="tabs d-flex flex-column justify-content-between">

    <div class="tab__item d-flex flex-row active">
      <div class="tabbed__left">
        <li class="tabs__li" data-tab="tab-1"><span class="header">Header 1</span></li>
      </div>
      <div class="tabbed__right" id="tab-1" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>

    <div class="tab__item d-flex flex-row">
      <li class="tabs__li" data-tab="tab-2"><span class="header">Header 2</span></li>
      <div class="tabbed__right" id="tab-2" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>

  </ul>

</div>

fiddle :https://jsfiddle.net/y7rqpjbf/