1px shared: наведите курсор на два элемента - PullRequest
Новая
       24

1px shared: наведите курсор на два элемента

7 голосов
/ 01 октября 2011

Два inline-block элемента рядом друг с другом. 

.e{border:1px #ccc solid}
.e:hover{border-color:#555}

Я хотел бы уменьшить границу 1px + 1px между ними до общей границы 1px.

Для иллюстрации. 

---------
|   |   |
---------

Выберите первый элемент. 

+++++-----
+   +    |
+++++-----

Выберите второй элемент. 

-----+++++
|    +   +
-----+++++

Сократить * 1019 несложно* ограничить 1px, установив border-right или border-left на 0, но как сохранить общую границу 1px при выборе любого элемента?

Без JavaScript.

Ответы [ 2 ]

6 голосов
/ 01 октября 2011

Вы можете дать им левое поле -1px, чтобы их границы перекрывались, а затем отменить это поле на первом.Затем настройте z-index при наведении (и не забудьте position: relative, чтобы z-index заработал).Примерно так: 

.e {
    border: 1px #ccc solid;
    position: relative;
    margin-left: -1px;
}
.e:first-child {
    margin-left: 0;
}
.e:hover {
    border-color: #555;
    z-index: 5;
}

Демонстрация: http://jsfiddle.net/ambiguous/XTzqx/

Возможно, вам придется немного поиграть с :first-child в зависимости от структуры вашего HTML;пара других опций, если :first-child или другой псевдокласс не будет работать:

  • Оберните все это в <div> с padding-left: 1px, чтобы обойти вокруг margin-left: -1px.
  • Добавьте дополнительный класс к первому, который имеет margin-left: 0.
0 голосов
/ 01 октября 2011

Сделайте состояние :hover границей 2px и присвойте ему значение -1px margin с обеих сторон.Сделайте исключения для :first-child и last-child, если вам не нужно заботиться о каждом браузере ... Я смотрю на вас IE6 / 7

...