Здравствуйте, я новичок, и не могу никак решить проблему.
Проблема такая, пытался разными способами (теми что выделены как комментарии в коде) заставить работать div так, чтобы когда навести мышь на div, он увеличивался и накладывался поверх div'а стоящего рядом(так чтобы все остальные div не двигались и оставались стоять на прежнем месте). Подскажите как это можно реализовать, может я вообще не с той стороны копаю?
$(document).ready(function(){
$('.categories div').mouseover(function(){
$(this).css( 'width','442');
//$(this).css( 'display','inline-block');
//$(this).css( 'z-index','50');
//$('.categories div').css( 'z-index','100');
//$('.categories div').css( 'position','absolute');
//$(this).css( 'overflow','hidden');
//$('.categories').css( 'position','relative');
});
$('.categories div').mouseout(function(){
$(this).css( 'width', '200');
$(this).css( 'position','relative');
});
});
<div class="categories">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
.categories>div{
width:200px;
height: 200px;
float: left;
margin:20px;
transition:width 2s;
position: relative;
border:1px solid;
/*z-index: 1;*/