2

So, I got this code the works like Tabs opening the content when each tab is hovered. So when the user removed the mouse, they close automatically. How would I go to make the content of the last hovered Tab to remain open?

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
Leon Freire
  • 798
  • 2
  • 6
  • 16
  • change opacity see on this answer http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering – J nui Mar 30 '17 at 16:21

3 Answers3

3

Add a .last class when you hover a tab, and only remove it when another tab is hovered.

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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
1

Let's try this: with simple jquery function 

$(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>
Mahesh Singh Chouhan
  • 2,558
  • 1
  • 16
  • 26
0

You can use mouseover, mouseleave events, .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>
guest271314
  • 1
  • 15
  • 104
  • 177