I make a bootstrap on a grid, there are a number of products, each wrapped in .col-md-2, so that when you hover over one of the products, its parent .col-md-2 block is not indented. How to do it? Screen below.

enter image description here

    3 answers 3

    You use the border when you hover over an element, and you want to compensate for this by removing the indents from the neighboring elements.

    Or you can simply use box-shadow instead of border :

     .someBlock:hover { box-shadow: inset 0 0 1px 3px orange; }

    Example: Fiddle

       .product:hover { margin: 0; } 
         $('#объект_на_который_наводишь').on('mouseover',function(){$(this).parent().css('margin','0');}