JavaScript Make an hover stay hovered until next link [closed] make hover stay

My solution is similar to that of SW4, but offers a slightly different variation. Basically, when you hover over an item, you want to add a style class to it, while removing that class from all of the other (possibly previously hovered) items.

FIDDLE - http://jsfiddle.net/44c9x5eb/2/

In my fiddle, I use a div item called #body instead of styling the actual body element.

HTML

<div id='body'></div>

<div class="item" data-bg="http://www.evokia.com/images/large-background.jpg">1</div>
<div class="item" data-bg="http://p1.pichost.me/i/10/1333648.jpg">2</div>
<div class="item" data-bg="http://www.desktopaper.com/wp-content/uploads/wonderful-fish-wallpaper-large-background.jpg">3</div>
<div class="item" data-bg="http://p1.pichost.me/640/17/1397737.jpg">4</div>

CSS

#body{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#eee;
    z-index:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    transition: all 350ms ease-in;     
}
.item{
    float:left;
    text-align:center;
    padding:20px;
    margin:0 8px;
    background:#f00;
    position:relative;
    z-index:100;
}
.item.selected{
    background:#0f0;
}

jQuery

$('.item').mouseover(function(){

    //If this item is already selected, forget about it.
    if ($(this).hasClass('selected')) return;

    //Find the currently selected item, and remove the style class
    $('.selected').removeClass('selected');

    //Add the style class to this item
    $(this).addClass('selected');

    //set the body to a different image
    $('#body').css( 'background-image', 'url(' + $(this).data('bg') + ')' );
});

You could use the below to simply apply a 'hover' class on mouseover of a valid element, after stripping it from similarly qualifying ones. The animation can be handled in CSS using a transition

$('div').on('mouseover', function() {
  $('div').removeClass('hover');
  $(this).addClass('hover');
});

body {
  background: black;
}
div {
  transition: all 200ms ease-in;
  color: #fff;
  border: 3px solid #fff;
  width: 20%;
  display: inline-block;
  margin: 0 20px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.hover {
  color: #000;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>link</div>
<div>link</div>
<div>link</div>