Как сделать изменение фона при наведении

@skynet80 · Регистрация: 17.05.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Пытаюсь сделать, чтобы при наведении на объект изменялось его оформление(смотреть рисунок).
Ту красную картинку разрезал на 3 части, левое и правое скругление и из центра полоску.
пытался сделать через псевдоэлементы, но ничего не получается((( Отображается только центральная полоска и то как то коряво не по тексту...

Помогите пожалуйста разобраться в этом.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
#menu {
  height: 50px;
  background: url(img/menu.png) no-repeat;
  margin-top: 17px;
}
 
#menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
 
#menu ul li {
  float: left;
  display: block;
  background: url(img/line.png) right center no-repeat;
  height: 51px;
  padding: 0px 23px 0px 25px
}
 
#menu ul li.hover {
  background: url(img/cselect.png) repeat-x;
}
 
#menu ul li.hover:before {
  background: url(img/leftselect.png);
}
 
#menu ul li.hover:after {
  background: url(img/rightselect.png);
}
 
#menu ul li.first {}
 
#menu ul li.last {
  background: none;
}
 
#menu ul li a {
  display: block;
  text-align: center;
  padding: 15px 0px 0 0px;
  color: #000;
  font-size: 17px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold
}
 
#menu ul li.hover a {
  color: #fff;
}
 
#menu ul li.hover ul {
  display: block;
  margin: 0 0 0 -26px;
  padding: 16px 0 0 0px;
}
 
#menu ul ul {
  display: none;
  position: absolute;
}
 
#menu ul li.hover ul li {
  float: left;
  display: block;
  width: 200px;
  clear: both;
  background: #06F;
  pdding: 0 10px 0 10px;
  border: none;
}
 
#menu ul ul li.first {
  margin: 0px;
}
 
#menu ul ul li.last {}
 
#menu ul li.hover ul li.hover {
  background: #09F;
}
 
#menu ul li.hover ul a {
  margin: 0px;
  padding: 15px 0 0 0;
  font-size: 14px;
  color: #fff;
  text-align: left;
}

@Micheal · 02.06.2014, 16:59

как вариант - сделать ссылки блочными (или inline-block), задать им размеры добавить закругления границ и т.д. также добавить a:hover с настройками для варианта с наведением мыши

@aj17 · 02.06.2014, 17:03

я бы на вашем месте не использовал картинку вообще, сделал бы все заливкой-градиентом, и не надо пихать лишние спаны, дивы, псевдоэлементы, классы или что там у вас, для скругления используйте border-radius:число px;, а для нужного градиента есть замечательный онлайн генератор http://www.colorzilla.com/gradient-editor/, соответственно тексту дайте стили, и свойство text-shadow для тени, она по моему у вас там есть...

@BarbosLV · 02.06.2014, 17:23

Зачем резать? Заливаешь фон градиентом. Ну и на hover изменения.
для такого вообще картинки не нужны.

HTML5
1
2
3
<div class="telo">
 <div class="tl">Knopka</div> 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.telo{
    width:160px;
    height:30px;
    background: #ccc;
    padding: 10px;
}
.tl{
    text-align:center;
    font-size:22px;
    font-weight:800;
    color:#FFF;
    width:160px;
    height:30px;
    border:solid 1px #800000;
    border-radius: 10px;
    background: rgb(234,59,46); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(234,59,46,1) 0%, rgba(211,57,33,1) 36%, rgba(188,53,35,1) 49%, rgba(137,16,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,59,46,1)), color-stop(36%,rgba(211,57,33,1)), color-stop(49%,rgba(188,53,35,1)), color-stop(100%,rgba(137,16,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(234,59,46,1) 0%,rgba(211,57,33,1) 36%,rgba(188,53,35,1) 49%,rgba(137,16,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(234,59,46,1) 0%,rgba(211,57,33,1) 36%,rgba(188,53,35,1) 49%,rgba(137,16,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(234,59,46,1) 0%,rgba(211,57,33,1) 36%,rgba(188,53,35,1) 49%,rgba(137,16,34,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(234,59,46,1) 0%,rgba(211,57,33,1) 36%,rgba(188,53,35,1) 49%,rgba(137,16,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea3b2e', endColorstr='#891022',GradientType=0 ); /* IE6-9 */
}
    .tl:hover{
        background: rgb(137,16,34); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(137,16,34,1) 0%, rgba(188,53,35,1) 49%, rgba(211,57,33,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,16,34,1)), color-stop(49%,rgba(188,53,35,1)), color-stop(99%,rgba(211,57,33,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(137,16,34,1) 0%,rgba(188,53,35,1) 49%,rgba(211,57,33,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(137,16,34,1) 0%,rgba(188,53,35,1) 49%,rgba(211,57,33,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(137,16,34,1) 0%,rgba(188,53,35,1) 49%,rgba(211,57,33,1) 99%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(137,16,34,1) 0%,rgba(188,53,35,1) 49%,rgba(211,57,33,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#891022', endColorstr='#d33921',GradientType=0 ); /* IE6-9 */
 
    }

пример

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Micheal 53 / 53 / 28 Регистрация: 23.04.2011 Сообщений: 214
	02.06.2014, 16:59
	как вариант - сделать ссылки блочными (или inline-block), задать им размеры добавить закругления границ и т.д. также добавить a:hover с настройками для варианта с наведением мыши 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	02.06.2014, 17:03
	я бы на вашем месте не использовал картинку вообще, сделал бы все заливкой-градиентом, и не надо пихать лишние спаны, дивы, псевдоэлементы, классы или что там у вас, для скругления используйте border-radius:число px;, а для нужного градиента есть замечательный онлайн генератор http://www.colorzilla.com/gradient-editor/, соответственно тексту дайте стили, и свойство text-shadow для тени, она по моему у вас там есть... 0