CodePen

HTML

            
              <ul class="articles">
  <li>This is the first</li>
  <li>This is a second item</li>
  <li>This is a third</li>
</ul>

<ul class="links">
  <li>This is a item</li>
  <li>This is a item</li>
  <li>This is a item</li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul {
  display: block;
  float: left;
  width: 250px;
  padding: 0;
  margin: 0;
}

.articles { list-style: none; }
.articles li { display: none; }

.links li:hover { cursor: pointer; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Show the first article
$('ul.articles li:first').css( { 'display' : 'block' }).addClass('active');

$('ul.links li').on( "mouseover", function() {
  var that = $(this),
      idx = that.index();
  
  // Find active class
  $('ul.articles li.active').fadeOut( 500, function() {
    $('ul.articles li.active').removeClass('active');
    
    $('ul.articles li').eq(idx).fadeIn( 500, function() {
      $('ul.articles li').eq(idx).addClass('active');
    });
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................