如何保持最后的悬停物品有效？

时间：2017-03-30 16:11:29

标签： html css

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

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>

3 个答案:

答案 0 :(得分：3)

悬停标签时添加perl -i.bak -pe 's/[^[:ascii:]]//g' "$(< paths.txt)" 课程，只有当其他标签悬停时才会将其删除。

＆＃13;
＆＃13; 
.last
＆＃13; 
var $tabs = $('.tab');
$tabs.hover(function() {
  $tabs.not($(this)).removeClass('last');
  $(this).addClass('last');
})
＆＃13; 
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%;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
$(document).on('mouseover', '.tab', function(e){
      e.preventDefault();
      var self = $(this),
          ref = self.attr('ref');
    
      $('.content').hide();
      $('#' + ref).fadeIn();
    
    })
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用mouseover，mouseleave个活动，.filter()，.next()，.not()，.show()，.hide()

＆＃13;
＆＃13; 
$("[id^=tab]").on({"mouseover": function() {
  $("[id^=content]").hide().filter($(this).next()).show()
}, "mouseleave": function() {
  $("[id^=content]").not($(this).next()).hide()
}})
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题