Выделение ссылки при наведении курсором цветной рамкой

@cleangroup · Регистрация: 22.01.2011

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

Здравствуйте уважаемые специалисты1

Наверняка Вы знаете как сделать что бы было Выделение ссылки при наведении курсором цветной рамкой

ПРимер вот здесь: http://mirshop.com.ua/

Интересует каким образом можна сделать подобное выделение ссылок (в данном случае в зеленный треугольник)

Заранее благодаренё

Vovan-VE · 22.01.2011, 06:40

Вы об этом?
Название: 1.png
Просмотров: 7022

Размер: 2.9 Кб

Чего же там сложного.

CSS
1
2
3
4
5
6
7
8
9
10
.groups_main li a { 
  display: block;
  padding: 2px 6px;
}
.groups_main li a:hover { 
  background-color: #92c042;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
}

@cleangroup · 22.01.2011, 11:16 **[ТС]**

Да, именно это но код в CSS не подходит. Дайте другой

Vovan-VE · 22.01.2011, 12:29

Сообщение от cleangroup

Дайте другой

Подправьте ручками, чтобы стал подходить.

@Sulik78 · 22.01.2011, 13:16

Не по теме:

IE не поддерживает border-radius

@mus · 22.01.2011, 14:31

cleangroup, выдрал код с того сайта, держите

CSS
1
2
3
4
.groups_main .groupItem { float:left; width:49%; margin-left:2%;}
.groups_main ul { list-style: circle outside none; font-size:11px; float:left; width:155px; padding-left:10px;}
.groups_main li a { padding:2px 6px; display:block;}
.groups_main li a:hover { background-color:#92C042; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}

html блок

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="groups_main"><div class="groupItem last">
<ul>
<li><a href="#">MacBook</a></li>
<li><a href="#">MacBook Air</a></li>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">iMac</a></li>
<li><a href="#">Mac mini</a></li>
</ul>
</div>
 
</div>

@cleangroup · 22.01.2011, 17:49 **[ТС]**

Спасибо большле mus, но к моему сожалению никак немогу у себя на сайте к HTML коду привязать этот эффект, просто список с маркерами выходит и всё

Как к вот этому коду:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="groups_main"><div class="groupItem last">
<ul>
<li><a href="#">MacBook</a></li>
<li><a href="#">MacBook Air</a></li>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">iMac</a></li>
<li><a href="#">Mac mini</a></li>
</ul>
</div>
 
</div>

привязать эффект?

@mus · 22.01.2011, 17:56

cleangroup,
1 способ: между теграми <head></head> вставь вот такой блок css стиля

HTML5
1
2
3
4
5
6
7
8
<style type="text/css" >
 
.groups_main .groupItem { float:left; width:49%; margin-left:2%;}
.groups_main ul { list-style: none outside none; font-size:11px; float:left; width:155px; padding-left:10px;}
.groups_main li a { padding:2px 6px; display:block;}
.groups_main li a:hover { background-color:#4196FE; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}
 
</style>

2 способ: запишите этот код стиля во внешнем файле с расширением css (только без тегов <style>), а между <head></head> вставте такую строку

HTML5
1
<link href="style.css" rel="stylesheet" type="text/css">

@cleangroup · 23.01.2011, 15:29 **[ТС]**

Ещё раз спасибо MUS! 2-й метод отпадает, а вот первый - то что надо!, и цвет выделения как раз под мой сайт!

Добавлено через 21 час 11 минут
Премного уважаемый Mus

Подскажите пожалуйста как внедрить к списку маркировочный точки (точки напротив каждого слова в списке)?

Как не пытаюсь сделать ни как невыходит, просто срабатывает эффект выделения ссылки.

Добавлено через 11 минут
Премного уважаемый Mus

Подскажите пожалуйста как внедрить к списку маркировочный точки (точки напротив каждого слова в списке)?

Как не пытаюсь сделать ни как невыходит, просто срабатывает эффект выделения ссылки.

Вот как здесь: http://mirshop.com.ua/

@mus · 23.01.2011, 16:39

cleangroup,

CSS
1
.groups_main ul { list-style: none outside none; font-size:11px; float:left; width:155px; padding-left:10px;}

в этой строке css стиля измените свойство list-style: none на любое другое.

вот список возможных маркеров:

none нет маркера
circle Маркер в виде круга
disc Маркер в виде заполненного круга. Значение по умолчанию
square Маркер в виде квадрата
armenian Армянская номерация
decimal Маркер в виде цифры
decimal-leading-zero Цифры с 0 перед началом (01, 02, 03, и т.д.)
georgian Грузинская номерация
lower-alpha (a, b, c, d, e, и т.д.)
lower-greek (alpha, beta, gamma, и т.д.)
lower-latin (a, b, c, d, e, и т.д.)
lower-roman (i, ii, iii, iv, v, и т.д.)
upper-alpha (A, B, C, D, E, и т.д.)
upper-latin (A, B, C, D, E, и т.д.)
upper-roman (I, II, III, IV, V, и т.д.)

Все версии Internet Explorer (в т.ч. IE8) не поддерживают аргументы "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", "georgian", или "inherit"

@xilgiz · 04.04.2011, 08:23

Помогите плиз. Мне бы тоже такое сделать, только у меня в цикле..и по выше описанному никак...
Вот у меня что:

PHP
1
printf("  <div class='linkk'><p class='link'><a href='v_lessons_audio.php?id=%s'>%s</a></p></div>",$myrow4["id"],$myrow4["title"]);

И стильи:

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
.link {
margin-bottom:25px;
margin:15px;}
 
.link a{text-decoration:none;
display: block;
  padding: 2px 6px;
 
}
 
 
 
 
 
.linkk{
background-color:#CCCCCC;
 
border-top:1px solid #00CCFF;
border-bottom:1px solid #00CCFF;
margin:15px;}
.linkk p {
margin-left:0px;
}
 
linkk div p a:hover { 
  background-color:#330033;
  color:#009966;}

Я конечно еще начинающии, но вроде рамка должна быть..)))

Еще, как вы из дремвувара текст ставите?)))

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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, то после закрытия окошка. . .

@cleangroup 0 / 0 / 0 Регистрация: 22.01.2011 Сообщений: 4

	Выделение ссылки при наведении курсором цветной рамкой 22.01.2011, 02:09. Показов 19277. Ответов 10 Метки нет (Все метки) Здравствуйте уважаемые специалисты1 Наверняка Вы знаете как сделать что бы было Выделение ссылки при наведении курсором цветной рамкой ПРимер вот здесь: http://mirshop.com.ua/ Интересует каким образом можна сделать подобное выделение ссылок (в данном случае в зеленный треугольник) Заранее благодаренё 0

@cleangroup 0 / 0 / 0 Регистрация: 22.01.2011 Сообщений: 4
	22.01.2011, 11:16 [ТС]
	Да, именно это но код в CSS не подходит. Дайте другой 0

@Sulik78
	22.01.2011, 13:16
	Не по теме: IE не поддерживает border-radius 0

@cleangroup 0 / 0 / 0 Регистрация: 22.01.2011 Сообщений: 4
	23.01.2011, 15:29 [ТС]
	Ещё раз спасибо MUS! 2-й метод отпадает, а вот первый - то что надо!, и цвет выделения как раз под мой сайт! Добавлено через 21 час 11 минут Премного уважаемый Mus Подскажите пожалуйста как внедрить к списку маркировочный точки (точки напротив каждого слова в списке)? Как не пытаюсь сделать ни как невыходит, просто срабатывает эффект выделения ссылки. Добавлено через 11 минут Премного уважаемый Mus Подскажите пожалуйста как внедрить к списку маркировочный точки (точки напротив каждого слова в списке)? Как не пытаюсь сделать ни как невыходит, просто срабатывает эффект выделения ссылки. Вот как здесь: http://mirshop.com.ua/ 0