Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/17: Рейтинг темы: голосов - 17, средняя оценка - 5.00
Zilberman
8 / 8 / 1
Регистрация: 20.12.2010
Сообщений: 191
1

Как реализовать граф. кнопку и прикрутить :hover

12.07.2011, 03:04. Просмотров 3291. Ответов 5
Метки нет (Все метки)

Здравствуйте господа хорошие.

Подсобите советом.

Сделал вход на сайт кнопкой в виде картинки все ничего, только следующей целью задумки было изменение картинки при наведении.

Использовал псевдокласс :hover для разрешения данной задачи однако я так понимаю что-то пошло не так.

Короче без <img> псевдоклас работает но не так как хотелось. А с имг при наведении на картинку она срабатывает как кнопка но вот Ховер не фурычит.

Код привожу в студию.

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head runat="server">
    <title></title>
    <link href="Style.css" rel="Stylesheet" type="text/css" />
    <script src="JScript.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="knopka">
    <a href="" title="вход на сайт"/>
    <a href="" target="_blank"><img src="img/knopka1.gif" alt="вход на сайт" /> 
    </div>
    </div>
    </form>
</body>
</html>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#knopka
{
    width: 400px;
    height: 528px;
    margin: 0 auto;
    background-image: url(img/knopka1.gif);
}
 
/* Сразу скажу что пользовался еще и a:link с вставкой туда картинки knopka1 та же бодяга */
 
a:hover 
{
    background-image: url(img/knopka2.gif);
}

Заранее благодарю за конструктивные ответы.
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.07.2011, 03:04
Ответы с готовыми решениями:

Поверх миниатюры поста нужно прикрутить hover эфект с заголовком
Добрый день. Поверх миниатюры поста нужно прикрутить hover эфект с текстом. Подскажет кто?...

Форма поиска + :hover ,не работает при наведение на кнопку, как быть?
Как мне сделать, чтобы картинка кнопки была единым целым с оболочкой?? :( Никак не пойму, как...

Реализовать граф от 1 до 10: граф связный; -число от 1 до 10, могут повторяться
Реализовать граф от 1 до 10: граф связный; -число от 1 до 10, могут повторяться. Добавить рандом...

Как прикрутить спинер, например к таблице что загружает данные, после нажатия на кнопку?
Как прикрутить спинер, например к таблице что загружает данные, после нажатия на кнопку? Angular 6

5
Darth Coder
285 / 266 / 107
Регистрация: 10.06.2011
Сообщений: 696
12.07.2011, 05:53 2
Без JS тут точно не обойтись
0
Vovan-VE
13183 / 6571 / 1039
Регистрация: 10.01.2008
Сообщений: 15,069
12.07.2011, 12:03 3
Цитата Сообщение от Zilberman Посмотреть сообщение
HTML5
1
2
3
4
<div id="knopka">
 <a href="" title="вход на сайт"/>
 <a href="" target="_blank"><img src="img/knopka1.gif" alt="вход на сайт" /> 
 </div>
Зачем столько всего?
HTML5
1
<a id="knopka" href="" title="вход на сайт"></a>
CSS
1
2
3
4
5
6
7
8
9
10
#knopka {
    display: block;
    width: 400px;
    height: 528px;
    margin: 0 auto;
    background: url('/img/knopka1.gif') 0 0 no-repeat;
}
#knopka:hover {
    background-image: url('/img/knopka2.gif');
}
1
Zilberman
8 / 8 / 1
Регистрация: 20.12.2010
Сообщений: 191
12.07.2011, 18:58  [ТС] 4
Vovan-VE

Спасибо очень помог, все четко!


только единственное убрал атрибуты бэкграунда 0 0 и no-repeat у #knopka с ними почему то не показывало исходную картинку а при наведении в эту область совершалось переключение на вторую.

так что корректнее в моем случае было так

CSS
1
2
3
4
5
6
7
8
9
10
#knopka {
    display: block;
    width: 400px;
    height: 528px;
    margin: 0 auto;
    background: url('/img/knopka1.gif');
}
#knopka:hover {
    background-image: url('/img/knopka2.gif');
}


Еще раз вам огромное спасибо!

Добавлено через 21 минуту
А все-таки что-то не то.
Сейчас заметил что картинка плодиться в низ на одну. Таким образом получается две почему-то и две они рабочие.

Ставлю в свойства no-repeat обе исходные картинки исчезают однако при наведении появляется вторая.
Добавляю 0 0 no-repeat та же бодяга.



Что это такое? Все контейнеры и дивы в котором эти картинки ограничены размерами даже body ограничел в высоте по картинке чтобы не было скролинга на стартовой странице.

А он собака плодит. Не могу найти причинно-следственную связь
0
Vovan-VE
13183 / 6571 / 1039
Регистрация: 10.01.2008
Сообщений: 15,069
12.07.2011, 19:13 5
Цитата Сообщение от Zilberman Посмотреть сообщение
Ставлю в свойства no-repeat обе исходные картинки исчезают однако при наведении появляется вторая.
Свойство background - это составное свойство:
CSS
1
background:#fdd url('/img/bg.jpg') no-repeat 0 0 scroll;
А background-image, background-repeat, background-position и т.д. - это его составляющие части.
CSS
1
2
3
4
5
background-color: #fdd;
background-image: url('/img/bg.jpg');
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
Таким образом, если Вы указываете no-repeat для свойства background-image после url(), то, естественно, ничего работать не будет.
0
Zilberman
8 / 8 / 1
Регистрация: 20.12.2010
Сообщений: 191
12.07.2011, 19:46  [ТС] 6
Вот, все так как Вы говорите:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="Style.css" rel="Stylesheet" type="text/css" />
    <script src="JScript.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="enter">
    <a id="knopka" href="" title="вход на сайт"/>
    </div>
    </div>
    </form>
</body>
</html>

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
body, html
{
    padding: 0px;
    margin: 0px;
    font: Trebuсhet MS;
    text-align:center;
    background: url(img/brick.gif);
    background-attachment:fixed;
    height: 528px;
    
    
}
#container 
{
    width: 900px;
    height: 528px;
    text-align:left;
    margin: 0 auto;
    background-attachment:fixed;
 
}
#knopka {
    display: block;
    width: 400px;
    height: 528px;
    margin: 0 auto;
    background: url(img/dveri_vhodnieclose.gif) 0 0 no-repeat;
}
#knopka:hover {
    background-image: url(img/dveri_vhodnieopenfonar.gif);
}


и все-равно ниже основной кнопки такая же кнопка и так же работает от ховера
0
12.07.2011, 19:46
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.07.2011, 19:46

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click
Нужно при клике, исключить события hover, во. И 1. Глюки .hover: При наведении на блок, к...

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

Прикрутить кнопку прокрутки комментариям
Не могу сообразить как прикрутить кнопку мож кто подскажет? Мои комментарии без регистрации...

Python 2.7. Как удобнее всего реализовать ориентированный граф со сложными весами?
Нужно работать с графом, содержащим во многих вершинах и ребрах набор разнотипных значений....


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

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

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