Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
0 / 0 / 0
Регистрация: 05.10.2014
Сообщений: 51
1

Сменить цвет при ховере

30.06.2015, 11:08. Просмотров 1335. Ответов 26
Метки нет (Все метки)


Есть такое меню для сайта:
Сменить цвет при ховере


Как сделать, чтобы при наведении на каждую кнопку менялся цвет линии соответственно цвету кнопки.
Сам не новичок в css, но этого раздела совсем не знаю.
Помню были рекомендации объединить объекты, но дело в том, что линия одна.

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

Как поменять цвет кнопки при ее нажатии, а при наведении чтоб цвет не менялся?
//css файл .mymegabutton{ background: blue; } .hvr{ background: green; } .act{...

При выборе флажка цвета, и после нажатия на кнопку сменить цвет
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> ...

Сменить цвет при потере фокуса
При нажатии на инпут1 к границе инпута1 применяется красный цвет,но при нажатии на инпут2, инпут1...

Сменить цвет кнопки при нажатии
Нужны коды для кнопки button Что бы при нажатий менялся цвет и при нажатий второй раз другой цвет...

26
413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
30.06.2015, 11:17 2
NeTakoi, переношу в тему javascript

Добавлено через 24 секунды
NeTakoi, и покажите вашу верстку
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 11:25 3
whiteapps, а чо сразу нам-то это можно и через css делать, если постараться

у этих кнопок 100% есть общий класс
вот его пожалуйста мне дайте, тут он будет выглядеть как menubut
id этой линии тоже дайте, пока будет line
Javascript
1
2
3
4
5
[].forEach.call(document.querySelectorAll(".menubut"),function(e){
e.onmousemove=function(){
line.style.background=getComputedStyle(this).background
}
})
0
0 / 0 / 0
Регистрация: 05.10.2014
Сообщений: 51
30.06.2015, 11:25  [ТС] 4
Код HTML:
HTML5
1
2
3
4
5
6
<div class="header">
            <div class="myMenu">
                <a href="./aboutme"><button class="mButt" id="firB">Узнай больше</button></a><a href="./aboutme"><button class="mButt" id="secB">Моя музыка</button></a><a href="./aboutme"><button class="mButt" id="thiB">Для музыкантов</button></a><a href="./aboutme"><button class="mButt" id="fouB">Контакты</button></a><a href="./aboutme"><button class="mButt" id="fivB">Напиши мне</button></a>
                <hr class="myLine">
            </div>
        </div>
А это код CSS:
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
.header {
width: 100%;
height: auto;
background-color: #111111;
}
.myMenu {
width: 100%;
height: 80px;
position: fixed;
z-index: 900;
}
.myLine {
border: none;
color: #eeeeee;
background-color: #eeeeee;
height: 5px;
margin: 0;
}
/*MyMenuButtons*/
.mButt {
width: 20%;
height: 100%;
border: 0px;
background-color: #111111;
color: #eeeeee;
font-size: 18px;
font-family: Comic-Sans, times;
font-weight: 700;
font-style: italic;
}
#firB {
color: #555555;
background-color: #0099ff;
transition: color 0.5s, background-color 0.5s;
}
#firB:hover {
color: #555555;
background-color: #00bbff;
}
#secB {
color: #555555;
background-color: #ff9900;
transition: color 0.5s, background-color 0.5s;
}
#secB:hover {
color: #555555;
background-color: #ffbb00;
}
#thiB {
color: #555555;
background-color: #33ff33;
transition: color 0.5s, background-color 0.5s;
}
#thiB:hover {
color: #555555;
background-color: #77ff77;
}
#fouB {
color: #555555;
background-color: #ff3333;
transition: color 0.5s, background-color 0.5s;
}
#fouB:hover {
color: #555555;
background-color: #ff7777;
}
#fivB {
color: #555555;
background-color: #bbbbbb;
transition: color 0.5s, background-color 0.5s;
}
#fivB:hover {
color: #555555;
background-color: #dddddd;
}
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 11:28 5
Javascript
1
2
3
4
5
[].forEach.call(document.querySelectorAll(".mButt "),function(e){
e.onmousemove=function(){
document.getElementsByClassName("myLine")[0].style.background=getComputedStyle(this).background
}
})
1
Lazy_Den
30.06.2015, 11:44
  #6

Не по теме:

BANO, лучше свойство getComputedStyle(this).backgroundColor, т.к. просто background не все браузеры поддерживают (FF, IE).

0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 11:45 7
Lazy_Den, согласен, там может быть и картинка

Добавлено через 16 секунд
и вообще какая-нибудь фигня
0
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
30.06.2015, 11:49 8
Лучший ответ Сообщение было отмечено whiteapps как решение

Решение

На чистом CSS можно, но если кнопок много, то я не знаю компактного решения.
Вот для двух кнопок вариант
HTML5
1
2
3
4
5
<div id="menu">
  <button class="mbutt red">red</button>
  <button class="mbutt blue">blue</button>
  <hr id="myline" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
button {
  color: white;
}
#myline {
  height: 10px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
 
#menu .mbutt.red:hover ~ #myline {
  background-color: red;
}
 
#menu .mbutt.blue:hover ~ #myline {
  background-color: blue;
}
Добавлено через 2 минуты
Ну можно ещё для каждой кнопки держать скрытую линию цвета родителя и показывать по hover
2
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 11:51 9
JokerNN, в css можно из атрибутов брать значение
можно просто на ховер класса кнопок поставить что бакгроун классов линии будет менятся на значение аттрибутов
0
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
30.06.2015, 11:53 10
BANO, можно но тут мы селектим линию и её аттрибут background-color не такой какой нам нужен, или я Вас не понял
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 12:00 11
JokerNN, нет, в js мы берём уже компилированный стиль, а в css можно брать значение из аттрибутов
короче тут написано

Добавлено через 2 минуты
а ещё лучше, есть пример тут
0
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
30.06.2015, 12:05 12
BANO, я понимаю Вас, но я не понимаю как применить то что Вы говорите к данной задаче
Попробуйте сделать с использованием CSS attr, то что просят
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 12:15 13
JokerNN, знаете, мне как бы хватит js, но раз публика просит))
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.mBut {
background-color: attr(color)
}
.mBut:hover + .line{
background-color: attr(color)
}
</style>
<div menu>
<div class="mBut" color="red"></div>
<div class="mBut" color="blue"></div>
<div class="line"><div>
</div>
Добавлено через 58 секунд
может не работать, так как я не знаю что надо применить там ~ + или >
0
413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
30.06.2015, 12:33 14
BANO,
attr() умеет работать только с контентом
поддержка цветов, размеров и проч. только в планах
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 12:35 15
whiteapps, ну тогда скрипт
0
134 / 130 / 57
Регистрация: 29.12.2011
Сообщений: 359
30.06.2015, 12:51 16
Цитата Сообщение от BANO Посмотреть сообщение
мне как бы хватит js
Ну Вы сами удтверждали что можно с CSS, я просто думал, что до чего-то не дошёл и Вы объясните
Цитата Сообщение от BANO Посмотреть сообщение
может не работать
И не будет
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 13:00 17
Цитата Сообщение от JokerNN Посмотреть сообщение
И не будет
да ладно))
короче на всё есть скрипт, который работает
0
0 / 0 / 0
Регистрация: 05.10.2014
Сообщений: 51
30.06.2015, 15:48  [ТС] 18
Цитата Сообщение от BANO Посмотреть сообщение
[].forEach.call(document.querySelectorAll(".mButt "),function(e){
e.onmousemove=function(){
document.getElementsByClassName("myLine")[0].style.background=getComputedStyle(this).background
}
})
Можешь конкретно для моего примера сделать? Что там писать в this и после backgroundColor?
0
Ренегат
Эксперт HTML/CSS
1735 / 1080 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
30.06.2015, 15:55 19
Цитата Сообщение от NeTakoi Посмотреть сообщение
Можешь конкретно для моего примера сделать?
собственно мой код и сделан для вашего примера, если вы хотите прям последнюю версию то держите
Javascript
1
2
3
4
5
[].forEach.call(document.querySelectorAll(".mButt "),function(e){
e.onmousemove=function(){
document.getElementsByClassName("myLine")[0].style.backgroundColor=getComputedStyle(this).backgroundColor
}
})
а в this вы никогда ничего не напишите

Добавлено через 3 минуты
Цитата Сообщение от JokerNN Посмотреть сообщение
Ну Вы сами утверждали что можно с CSS
а я и сейчас утверждаю, просто мне легче написать 5 строчек кода, чем писать в css под каждую кнопку какую-то ненужную по сути вещь
1
0 / 0 / 0
Регистрация: 05.10.2014
Сообщений: 51
30.06.2015, 15:55  [ТС] 20
Цитата Сообщение от BANO Посмотреть сообщение
собственно мой код и сделан для вашего примера
Спасибо) А куда писать сам цвет? в виде #00ff00?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.06.2015, 15:55

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

Как сменить цвет шаров при их пересечении
Шары движутся по траектории в виде окружности. Как сделать так чтобы при пересечении шаров их цвет...

Сменить цвет времени при нажатии кнопки паузы
case WM_CTLCOLORSTATIC: { HDC hdcStatic = (HDC)wParam; SetTextColor((hdcStatic)wParam,...

StringGrid: сменить цвет ячейки при нажатии на кнопку
Есть stringgrid и кнопка. При нажатии на кнопку происходит поиск одинаковых значений в ячейках....

Сменить цвет в edit при вводе 5 одинаковых подряд идущих цифр
Сейчас при вводе в едит 1,2,1,2,3,2,1,2,1,1,1 появляется в мемо -красн- т.е. при суммарном...


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

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

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