Hover эффект выходит из границы

Question

Вот мой JSFiddle, где у меня есть таблица, где при наведении курсора мыши, ее строки должны менять цвет, как это:

.hover-row:hover { 
    background-color: #FFEFC6; 
} 

Однако, на последнем ряду, эффект парения будет переполняться (оболочка имеет некоторый радиус). Можем ли мы что-то сделать, чтобы это предотвратить?

Я пробовал с z-index и/или border-radius, но это просто не будет иметь никакого эффекта!

Answer 1

Вы можете установить overflow: hidden; на .wrap.

Jsfiddle

Answer 2

Вы не видите результатов, потому что ваш: класс hover находится на вершине вашего css. Он должен быть ниже ваших базовых классов, иначе к нему применяются каскадные правила. Когда вы перемещаете его, вы можете применить к нему радиус границы.

border-radius:10px; 

http://jsfiddle.net/q2w4jjyt/23/

Тем не менее, я бы специально направлены линию команды 6 с идентификатором так, чтобы команда 5 не получает радиус, а также и выглядеть глупо.