Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.96/242: Рейтинг темы: голосов - 242, средняя оценка - 4.96
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
1

Увеличение шрифта ссылки при наведении курсора

02.12.2011, 20:37. Показов 44140. Ответов 19
Метки нет (Все метки)

при наведении на ссылку курсора меняется размер шрифта. у меня интересный вопрос) как сделать, чтоб увеличение шло равномерно во все стороны, а не с левого верхнего угла?

Добавлено через 24 минуты
неужели это нвозможно?)
1

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

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.12.2011, 20:37
Ответы с готовыми решениями:

Увеличение изображения при наведении курсора
При наведении на фотографию, она увеличивается. <div class="foto"><img width="250"...

Расположение изображений, увеличение при наведении курсора
подскажите пожалуйста, использую этот код css для эффекта увеличения картинки при наведении...

Изменение первой буквы ссылки при наведении курсора
Здравствуйте! Подскажите пожалуйста как реализовать такое - нужно чтобы при наведении на ссылку...

Смена цвета картинки (SVG) и ссылки (буквы) при наведении курсора мыши
Здравствуйте, я никогда до этого не работал с svg. У меня есть ссылка <a...

19
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
02.12.2011, 21:29 2
Лови. Transition для нагрядности
HTML5
1
<a href="#">hover</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    border: 1px solid black;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
 
a:hover {
    font-size: 40px;
}
Ширина и высота обязательно должны быть заданы у блока.

Добавлено через 1 минуту
Вот пример
http://jsfiddle.net/tfYHk/
2
2 / 2 / 0
Регистрация: 29.11.2011
Сообщений: 13
02.12.2011, 21:34 3
Deleted, ибо выше дан более хороший ответ.
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
02.12.2011, 21:36  [ТС] 4
zaanao, мне он для меню нужен, не хочу картинки делать и увеличивать, хотя не пробовал, может они также из угла увеличиваются)
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 19:38 5
Цитата Сообщение от Daredevi1 Посмотреть сообщение
CSS
я тут не пойму на форуме, если этот значок CSS, значит это реально код CSS, юзер ничего не может напутать??
просто тогда
код HTML
Цитата Сообщение от Daredevi1 Посмотреть сообщение
<a href="#">hover</a>
как дополнить чтобы работало??
я пробовал так:
HTML5
1
<a href="#">hover type="text/css" href="style.css"</a>
не получилось
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 19:41  [ТС] 6
Ципихович Эндрю,
HTML5
1
<a href="#" style='тут код стилей'>текст сылки</a>
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 19:45 7
Цитата Сообщение от z-z Посмотреть сообщение
тут код стилей
и какой же он?
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 19:57  [ТС] 8
Ципихович Эндрю, в данном случае наверно никак, здесь я сделал так
просто ссылка
HTML5
1
<a href=''>privet</a>
, в
HTML5
1
<head>
ссылку на css
типо
HTML5
1
<link rel="stylesheet" href="style.css" type="text/css">
и отдельный файл style.css
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:01 9
Цитата Сообщение от z-z Посмотреть сообщение
''
а пустота зачем?

Добавлено через 1 минуту
Цитата Сообщение от z-z Посмотреть сообщение
<a href=''>privet</a>
имеется ввиду в этой строке пустота зачем? между ' и '
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:03  [ТС] 10
Ципихович Эндрю, ну там ссылка на страницу, какую те надо, такую вставляй) мне там еще не нужна ссылка, просто надо обозначить, что она там будет, поэтому и не написал ничего
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:06 11
понял, получилось, спасибо
не понял откуда берётся и как убирается прямоугольник где эта ссылка, как меняется его размеры?
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:08  [ТС] 12
на сколько я помню, это
CSS
1
height: x; width: y
в css-файле
1
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:23 13
разобрался, осталось одно, как саму надпись зарядить, чтобы увеличивалась
HTML5
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
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!--между ' и ' можно вставлять ссылку на место в документе, куда ссылается ссылка-->
<a href=''>Привет</a>
<!--варинат увеличивающейся при наведении курсора надписи-->
<h1>Надпись</h1>
</body>
</html>
 
 
<!--
Текст файла style.css:
a {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    //ремарки в CSS
    //заремарченные строки создают прямоугольник в котором находится ссылка
    //border: 1px solid black;
    //width: 100px;
    //display: inline-block;
    //height: 20px;
    line-height: 20px;
}
 
a:hover {
    font-size: 40px;
}
ширина и высота обязательно должны быть заданы у блока
-->
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:25  [ТС] 14
Цитата Сообщение от Ципихович Эндрю Посмотреть сообщение
как саму надпись зарядить, чтобы увеличивалась
эээмм, не понял, что это значит?)
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:28 15
да не ссылка, а просто надпись, строка кода 10 в 13 м посте
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:32  [ТС] 16
Ципихович Эндрю, а вот это не знаю. попробуй написать тот же css, что и для тега а, но для h1,
то есть
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    border: 1px solid black;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
0
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:39 17
не жуётся, сделал стиль1 и стиль2

HTML5
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
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" h1="style2.css" type="text/css">
</head>
<body>
<!--между ' и ' можно вставлять ссылку на место в документе, куда ссылается ссылка-->
<a href=''>Привет</a>
<!--варинат увеличивающейся при наведении курсора надписи-->
<h1>Надпись</h1>
</body>
</html>
 
 
<!--
Текст файла style1.css:
a {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    //ремарки в CSS
    //заремарченные строки создают прямоугольник в котором находится ссылка
    //border: 1px solid black;
    //width: 100px;
    //display: inline-block;
    //height: 20px;
    line-height: 20px;
}
 
a:hover {
    font-size: 40px;
}
Ширина и высота обязательно должны быть заданы у блока
 
*******************************************************
 
Текст файла style2.css:
h1 {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    border: 1px solid black;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
 
-->
а что разве нельзя иметь это в одном файле??
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:41  [ТС] 18
Ципихович Эндрю, НУЖНО))) если у тебя 2 файла, то для обоих ссылка нужна в <head>
1
1475 / 381 / 34
Регистрация: 10.04.2009
Сообщений: 6,873
03.12.2011, 20:50 19
блин, не взлетает надпись, навожу на неё не увеличивается
HTML5
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
<html>
<head>
<title>Мой документ</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" h1="style.css" type="text/css">
</head>
<body>
<!--варинат увеличивающейся при наведении курсора ссылки-->
<!--между ' и ' можно вставлять ссылку на место в документе, куда ссылается ссылка-->
<a href=''>Ссылка</a>
<!--варинат увеличивающейся при наведении курсора надписи-->
<h1>Надпись</h1>
</body>
</html>
 
 
<!--
Текст файла style.css:
//ремарки в CSS
//увеличение ссылки при наведении на неё курсора
 
a {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    //заремарченные строки создают прямоугольник в котором находится ссылка
    //border: 1px solid black;
    //width: 100px;
    //display: inline-block;
    //height: 20px;
    line-height: 20px;
}
 
a:hover {
    font-size: 40px;
}
 
//ширина и высота обязательно должны быть заданы у блока
 
//*******************************************************
 
//увеличение надписи при наведении на неё курсора
h1 {
    font-size: 14px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    border: 1px solid black;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
-->
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
03.12.2011, 20:57  [ТС] 20
Ципихович Эндрю, блин, я тупой) да, если это не ссылка, это не сработает. наверно только через javascript это можно делать
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.12.2011, 20:57

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

Ссылки в таблице (html, css). Смена фона ячейки при наведении курсора
Здравствуйте, хотел вывести в браузере таблицу со ссылками на файли. Три ячейки. При наведении на...

При наведении курсора мыши на тег <li> изменить цвет вложенной в него ссылки
Как изменить ссылку в блоке после наведения на блок, блок это Li, &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;...

Увеличение картинки при наведении курсора
помогите пожалуста . при наведение должно увеличитса картина . что я не правильно сделал &lt;html&gt;...

Увеличение картинки при наведении курсора
Как сделать плавное увеличение картинки при наведении курсора в FireMonkey? Вроде все работает, но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.