Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.90/10: Рейтинг темы: голосов - 10, средняя оценка - 4.90
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
1

Ссылка должна подсвечиваться при наведении на картинку

20.05.2013, 00:25. Просмотров 1851. Ответов 10
Метки нет (Все метки)

Ссылка должна подсвечиваться при наведении на картинку. А она подсвечивается только тогда, когда я навожу на нее сверху. И текст наверху, не могу его опустить вниз ничем, чтобы не зацепить блок....
Вот сам код:
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
body {
margin: 0px;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0px 194px;
height: 1000px;
border: 1px solid yellow;
} 
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1154px; 
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
margin-top: 0px;
display: inline-block;
}
 
#menu ul li {
width: 84px;
height: 50px;
background-image: url("Ссылка_(обычная).jpg");
float: left;
display: inline;
list-style: none;
border-right: 1px solid #336699;
text-align: center;
}
 
#menu ul li a:hover {
width: 84px;
height: 50px;
background-image: url("Ссылка_(навести).jpg");
float: left;
display: inline;
list-style: underline;
color: red;
text-align: center;
}
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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 
    <div id="shapka">
        <div id="menu">
            <div>
            <ul>
            <li>ss</li>
            <li>aaa</li>
            <li>ddd</li>
            <li>ddd</li>
            <li>ddd</li>
            <li>ddd</li><li>ddd</li>
            <li><a href="grtg.html">sdd</a></li>
            
            </ul>
            
            </div>
        
        </div>
        
    </div>
    
    <div id="menu_kontekst">
    
    </div>
    
    <div id="piar">
    
    </div>
 
    <div id="inf">
    
    </div>
 
 
 
</body>
</html>
0
Миниатюры
Ссылка должна подсвечиваться при наведении на картинку  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.05.2013, 00:25
Ответы с готовыми решениями:

При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике - в синий
При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике - в синий, но этого...

Ссылка при наведении
В коде есть такая ссылка: &lt;a class=&quot;podrob&quot; href=&quot;/video/3.php?id=1&quot;&gt;Подробнее &lt;/a&gt; ...

Где ошибка? Должна быть прозрачность при наведении 80%
http://cssdeck.com/labs/b0pdk4tt Добавлено через 22 минуты &lt;a href=&quot;&quot;&gt; &lt;img...

При наведении на картинку
Всем доброго времени суток! Такая задача: при наведении на блок с картинкой нужно чтобы сверху...

Как добавить "картинку на картинку" при наведении?
Нужно сделать так как на этом сайте - http://www.break.com/ - не удаляйте ссылку не раклама При...

10
SaNeK_71
Прописан в интернете...
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
20.05.2013, 10:58 2
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
body {
margin: 0;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0 194px;
height: 1000px;
border: 1px solid yellow;
}
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1154px;
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
margin-top: 0;
display: inline-block;
}
 
#menu ul li {
width: 84px;
height: 50px;
background:#fff;
float: left;
list-style: none;
border-right: 1px solid #336699;
margin: 0;
padding: 0;
}
 
#menu ul li a {
padding: 0;
margin: 0;
width: 84px;
height: 50px;
display: block;
}
 
#menu ul li a:hover {
color: #fff;
background: url("твоя картинка.png") no-repeat 0 0;
display: block;
}
1
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 13:25  [ТС] 3
не понял только смысл фон добавлять. А как сами буквы та чуть ниже опустить?
0
SaNeK_71
Прописан в интернете...
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
20.05.2013, 13:27 4
Фон добавил для себя(для наглядности), так как твоих картинок не было.
Обычно ссылку внутри LI, я выравниваю padding'aми...
0
20.05.2013, 13:27
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 13:30  [ТС] 5
можете попробовать добавить? А то у меня что то при наведении тогда вниз съезжает, не пойму как его...
0
SaNeK_71
Прописан в интернете...
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
20.05.2013, 13:34 6
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
body {
margin: 0;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0 194px;
height: 1000px;
border: 1px solid yellow;
}
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1154px;
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
margin-top: 0;
display: inline-block;
}
 
#menu ul li {
width: 84px;
background:#fff;
float: left;
list-style: none;
border-right: 1px solid #336699;
margin: 0;
padding: 0;
}
 
#menu ul li a {
padding: 15px 0;
margin: 0;
width: 84px;
display: block;
}
 
#menu ul li a:hover {
color: #fff;
background: #f00;
display: block;
}
Текст ссылок по центру.
1
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 13:35  [ТС] 7
Да, но они по центру наверху, а мне нужно по середине. Вот такое при наведении
0
Миниатюры
Ссылка должна подсвечиваться при наведении на картинку  
SaNeK_71
Прописан в интернете...
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
20.05.2013, 13:42 8
Цитата Сообщение от vanyakilkil Посмотреть сообщение
Да, но они по центру наверху, а мне нужно по середине
Как Вам нужно сделать? Пришлите скрин, у меня текст идет по центру, как Вам нужно по середине, не понимаю, увы)))

Добавлено через 3 минуты
Цитата Сообщение от vanyakilkil Посмотреть сообщение
Да, но они по центру наверху, а мне нужно по середине. Вот такое при наведении
Это с моими стилями или Вы уже цвет правили?
Если мои, то попробуйте Ctrl + F5
1
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 13:48  [ТС] 9
полностью с вашим кодом все хорошо, только картинок нет пока что, добавлю. спасибо

Добавлено через 3 минуты
не пойму только что вы поменяли? паддинг? но у меня он прыгал как
0
SaNeK_71
Прописан в интернете...
94 / 78 / 11
Регистрация: 06.04.2012
Сообщений: 345
20.05.2013, 13:50 10
Убрал высоту, высоту сделал пэддингами, в данном случае - пэддинг для а.
0
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 13:52  [ТС] 11
Спасибо, понял.

Не по теме:

а вы долго учились вообще все это делать качественно? если не секрет

0
20.05.2013, 13:52
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.05.2013, 13:52

Окрашивать картинку при наведении
Ребят, есть картинка. При наведении курсора она увеличивается. Но мне надо чтобы она и...

При наведении на блок с пунктом меню и картинкой, должна появиться рамка
При наведении на блок с пунктом меню и картинкой, должна появиться рамка. У меня появляется только...

При наведении на картинку появляется блок
&lt;div class=&quot;content&quot;&gt;&lt;!-- CONTENT ON --&gt; &lt;div class=&quot;slider&quot;&gt;&lt;!-- SLIDER ON --&gt; ...


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

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

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