При наведение изменить фон

[qazibum]

В меню есть одно место где дизайнер нарисовал косую линию. Линия разделяет пункты меню. Меню имеет три состояния: холодное, при наведение, активное. У всех трех состояний разные бэкграунды. Все нормально за исключением этой косой линии. Установленная ширина пункта меню не позволяет нормально подставить нужный фон при наведение и когда пункт активен.

Вот рисунок

Белая линия на проблемном месте это разделитель пунктов, пунктам задана ширина и из-за этого при наведение изображение подставляется только на заданную ширину, остается уголочек без нужного фона. Вроде понятно?

Как сделать, чтобы фон подставлялся правильно? Без js, желлательно только css.

[wildhind]

так подставьте уголок картинкой в псевдоэлемент. Это классическое решение.

[qazibum]

так подставьте уголок картинкой в псевдоэлемент. Это классическое решение.

Уголок должен меняться в зависимости от состояния пункта меню. Видите на рисунке, в первом посте, он разный.

[Softlink]

css-трансформами еще можно решить вопрос

[psywalker]

так подставьте уголок картинкой в псевдоэлемент. Это классическое решение.

Уголок должен меняться в зависимости от состояния пункта меню. Видите на рисунке, в первом посте, он разный.

А в чём проблема по состоянию менять фон у псевдика?

[qazibum]

так подставьте уголок картинкой в псевдоэлемент. Это классическое решение.

Уголок должен меняться в зависимости от состояния пункта меню. Видите на рисунке, в первом посте, он разный.

А в чём проблема по состоянию менять фон у псевдика?

Да вроде ни в чем. Только у меня не получается задать свойства только для первого и второго элемента списка. Всего элементов пять, а уголок только на первом и втором.

li+li+li:after{content:none;} - не работает. Точнее работает, но одновременно и li:after{content:url(ugol.png) работает.

[qazibum]

А нет, все нормально. Второй раз юхаю эти элементы, не научился еще хорошо. wildhind, psywalker спасибо большое!

Edited August 3, 2012 by qazibum

[qazibum]

Можно пример такого решения? Не получается у меня. То before ведет себя как after, то скачут.

[wildhind]

если бефору задать позишн:абсолют, то вести себя он будет совершенно одинаково

[qazibum]

если бефору задать позишн:абсолют, то вести себя он будет совершенно одинаково

position:absolute;display:block; примененный к бефору, улучшили ситуацию. Сейчас при наведение картинки прыгают, когда бефорам или афтером добавляются боковые.

Edited August 3, 2012 by qazibum

[wildhind]

а посмотреть-то на эти чудеса можно?

[qazibum]

а посмотреть-то на эти чудеса можно?

На локалке.

Короче, поговорка "утро вечера мудренее" работает. Но что мудрости не до конца хватило

Получился такой код, не весь, самый важный

ul.menu li.active:after{
content:url(../images/after.png);
}
ul.menu li:hover:after{
content:url(../images/after.png);
}
ul.menu li.active:hover:after{
content:url(../images/after.png);
}

ul.menu li+li.active:before{
content:url(../images/before.png);
position:absolute;display:block;
}
ul.menu li+li:hover:before{
content:url(../images/before.png);
position:absolute;display:block;
}
ul.menu li.active+li:hover:before{
content:url(../images/before2.png);
position:absolute;display:block;
margin:0 0 0 -14px;
}

Теперь работает все, кроме положения, когда активна вторая кнопка и наводишь мышь на первую. В этом случае картика, которая подставляется справа к первой кнопке

ul.menu li:hover:after{
content:url(../images/after.png);
}

смещает вторую кнопку и между ними образуется косая полоска другого цвета. Это нормально при условии, что вторая кнопка не активна.

Т.е. надо прописать условие для первой кнопке, когда вторая активна. Вот как это сделать в css?

Прописать условие для второй кнопке, когда активна первая - нет проблем

ul.menu li.active+li:hover:before

А для первой, когда активна вторая?

Сделал гифку

Edited August 4, 2012 by qazibum

[wildhind]

ну во-первых, если уж добивать эту тему, то position: absolute надо всем уголкам.

а во-вторых, в вашем случае проще сделать всё картинками, а наложить кнопки друг на друга небольшим отрицательным маргином.

Если заморачиваться жёстко, то можно сделать меню без углов, а затем канвасом перерисовать его, тогда и граница между кнопками будет вполне наклонной, и можно будет текстурами заливать получившиеся фигуры. При этом можно будет текст кнопок править из cms.

Можно и с <map> заморочиться (у меня лично интуитивное неприятие этой темы, но это ещё ничего не значит).

[qazibum]

а во-вторых, в вашем случае проще сделать всё картинками, а наложить кнопки друг на друга небольшим отрицательным маргином.

Так и сделал, спасибо.