hoverout
<div class="tours">
<ul class="tours-List">
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
<li>
<h2>Tour Item</h2>
<a href="#">View more</a>
</li>
</ul>
</div>
var
$li = $('.tours li'),
$is_active = false;
function checkActive() {
if (!$li.hasClass("is-Active")) {
$li.css({
"width": 100 / $li.length + "%"
});
} else{
$li.css('width', 58 / ($li.length -1) + "%");
}
}
$li.css({
"float": "left",
"width": 100 / $li.length + "%"
});
$li.hover(function(e){
$is_active = true;
$(this).addClass("is-Active");
$(this).css('width', '42%');
}, function(){
$is_active = false;
$(this).removeClass("is-Active");
checkActive();
});
As I said in the comments, here is the js, simplified.
var $li = $('.tours li');
var widthPercentLeftWhenOneIsActive = 100-40; // you should use constant of course...
init();
function init(){
$li.css({
"float": "left",
"width": 100 / $li.length + "%"
});
};
$li.hover(function(e){
$(this).css("width","");//remove inline style
$(this).addClass("is-Active");
//$(this).css('width', '42%'); move it to the css
shrinkNonActiveItems();
}, function(){
$(this).removeClass("is-Active");
unShrinkAll();
});
function shrinkNonActiveItems(){
$li.each(function(index, item){
if(! $(item).hasClass("is-Active")){
$(item).css("width", (widthPercentLeftWhenOneIsActive / ($li.length-1))+"%" );
}
});
};
function unShrinkAll(){
$li.each(function(index, item){
$(item).css("width",100 / $li.length + "%");
}); };
And a little bit of css
li.is-Active{
width:40%;
};