如何使最后一个悬停的项目保持活动状态

所以，我得到了这段代码，就像每个标签悬停时打开内容的选项卡一样。因此，当用户移除鼠标时，它们会自动关闭。如何使最后一个悬停选项卡的内容保持打开状态？

body {
  position: relative;
  width: 50%;
  margin: 10% auto;
}
.tab {
  width: 20%;
  height: 50px;
  background: gray;
  cursor: pointer;
}
.content {
  background: #ccc;
  display: none;
}
.clear {
  clear: both;
  height: 10px;
}
#tab1:hover+#content1,
#tab2:hover+#content2,
#tab3:hover+#content3 {
  display: block;
}
#tab1 {
  position: absolute;
  top: 0;
  left: 0;
}
#tab2 {
  position: absolute;
  top: 60px;
  left: 0;
}
#tab3 {
  position: absolute;
  top: 120px;
  left: 0;
}
#content1 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content2 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content3 {
  position: absolute;
  top: 0;
  left: 20%;
}

<body>
  <div id="tab1" class="tab">
    Tab 1
  </div>
  <div id="content1" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.
  </div>
  <div id="tab2" class="tab">
    Tab 2
  </div>
  <div id="content2" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.
  </div>
  <div id="tab3" class="tab">
    Tab 3
  </div>
  <div id="content3" class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.
  </div>
</body>

将鼠标悬停在选项卡上时添加.last类，仅在将另一个选项卡悬停时将其删除。

var $tabs = $('.tab');
$tabs.hover(function() {
  $tabs.not($(this)).removeClass('last');
  $(this).addClass('last');
})

body {
  position: relative;
  width: 50%;
  margin: 10% auto;
}
.tab {
  width: 20%;
  height: 50px;
  background: gray;
  cursor: pointer;
}
.content {
  background: #ccc;
  display: none;
}
.clear {
  clear: both;
  height: 10px;
}
#tab1:hover+#content1,
#tab2:hover+#content2,
#tab3:hover+#content3,
.last + .content {
  display: block;
}
#tab1 {
  position: absolute;
  top: 0;
  left: 0;
}
#tab2 {
  position: absolute;
  top: 60px;
  left: 0;
}
#tab3 {
  position: absolute;
  top: 120px;
  left: 0;
}
#content1 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content2 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content3 {
  position: absolute;
  top: 0;
  left: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab1" class="tab">
  Tab 1
</div>
<div id="content1" class="content">
  1
</div>
<div id="tab2" class="tab">
  Tab 2
</div>
<div id="content2" class="content">
  2
</div>
<div id="tab3" class="tab">
  Tab 3
</div>
<div id="content3" class="content">
  3
</div>

让我们试试这个： 使用简单的jquery函数

$(document).on('mouseover', '.tab', function(e){
      e.preventDefault();
      var self = $(this),
          ref = self.attr('ref');
    
      $('.content').hide();
      $('#' + ref).fadeIn();
    
    })

body {
  position: relative;
  width: 50%;
  margin: 10% auto;
}
.tab {
  width: 20%;
  height: 50px;
  background: gray;
  cursor: pointer;
}
.content {
  background: #ccc;
  padding:15px;
  min-height:400px; width:100%;
  display: none;
}
.clear {
  clear: both;
  height: 10px;
}
#tab1 {
  position: absolute;
  top: 0;
  left: 0;
}
#tab2 {
  position: absolute;
  top: 60px;
  left: 0;
}
#tab3 {
  position: absolute;
  top: 120px;
  left: 0;
}
#content1 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content2 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content3 {
  position: absolute;
  top: 0;
  left: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab1" ref="content1" class="tab">
      Tab 1
    </div>
    <div id="content1" class="content">
      <b>Tab 1 Content</b>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.</p>
    </div>
    <div id="tab2" ref="content2" class="tab">
      Tab 2
    </div>
    <div id="content2" class="content">
      <b>Tab 2 Content</b>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.</p>
    </div>
    <div id="tab3" ref="content3" class="tab">
      Tab 3
    </div>
    <div id="content3" class="content">
      <b>Tab 3 Content</b>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in ullamcorper nisi. Cras sit amet ligula aliquet justo pellentesque dignissim. Integer ullamcorper felis magna, a porttitor urna molestie vitae. Fusce vitae pharetra tortor. Integer non
    ex quis ex tristique laoreet. Nulla interdum porta sem, eu eleifend felis elementum eu. Integer vehicula nibh metus, id eleifend diam vestibulum ac. Curabitur malesuada mauris nec libero vulputate, id interdum tortor tempor. Cras tincidunt arcu at
    orci ullamcorper faucibus id et metus. Vestibulum semper condimentum volutpat. Nullam a ex ante. Cras laoreet felis dictum lectus elementum, non tempor ex feugiat.</p>
    </div>

您可以使用mouseover、mouseleave事件、.filter()、.next()、.not()、.show()、.hide()

$("[id^=tab]").on({"mouseover": function() {
  $("[id^=content]").hide().filter($(this).next()).show()
}, "mouseleave": function() {
  $("[id^=content]").not($(this).next()).hide()
}})

body {
  position: relative;
  width: 50%;
  margin: 10% auto;
}
.tab {
  width: 20%;
  height: 50px;
  background: gray;
  cursor: pointer;
}
.content {
  background: #ccc;
  display: none;
}
.clear {
  clear: both;
  height: 10px;
}
/*
#tab1:hover+#content1,
#tab2:hover+#content2,
#tab3:hover+#content3 {
  display: block;
}
*/
#tab1 {
  position: absolute;
  top: 0;
  left: 0;
}
#tab2 {
  position: absolute;
  top: 60px;
  left: 0;
}
#tab3 {
  position: absolute;
  top: 120px;
  left: 0;
}
#content1 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content2 {
  position: absolute;
  top: 0;
  left: 20%;
}
#content3 {
  position: absolute;
  top: 0;
  left: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="tab1" class="tab">
    Tab 1
  </div>
  <div id="content1" class="content">
    1
  </div>
  <div id="tab2" class="tab">
    Tab 2
  </div>
  <div id="content2" class="content">
    2
  </div>
  <div id="tab3" class="tab">
    Tab 3
  </div>
  <div id="content3" class="content">
    3
  </div>
</body>

相关内容

最新更新

热门标签：