Разделение меню, позволяющего разделить цвета наведения

Question

У меня возникают проблемы с разбивкой меню, чтобы я мог дать каждой кнопке меню собственный цвет и цвет наведения. Пока этот код позволяет мне устанавливать универсальные цвета, которые влияют на все варианты меню. Я был бы очень признателен, если бы кто-нибудь мог сказать мне, что мне изменить/добавить в мой код, чтобы каждый из них сделал свой собственный цвет.

Я установил ссылку на Jsbin с кодом, который я использую, поэтому вы можете увидеть меню «вживую» - это может быть лучше для вас увидеть, как он работает. Вот ссылка: http://jsbin.com/ivoqoh/1/edit

Опять же, моя цель - дать каждому индивидуальному выбору меню (Страница 1, Страница 2 и т. Д.) Уникальный цвет и цвет наведения.

Answer 1

Вы затрагиваете все пункты меню, потому что используете класс в качестве стиля. Чтобы индивидуально выполнять пункты меню, вам необходимо назначить уникальный идентификатор для каждого элемента. В вашем случае было бы лучше обернуть div вокруг каждой ссылки и предоставить уникальные идентификаторы divs, чтобы вы могли изменять стили, как задние поверхности, а не только стиль для самих ссылок. В вашем документе CSS вы можете стилизовать каждый div по отдельности, и стиль будет каскадом вниз в его дочерние элементы (ваши теги).

Пример:

<div id="firstMenuItem"><a href... /></div> 

CSS

#firstMenuItem { 
    background-color:#111111; 
} 

Для достижения в ответ на пользовательские события в режиме реального времени в сети Интернет требует использования JavaScript. По существу, что вы хотите сказать на этом языке, «когда пользователь мыши над определенным div, измените цвет фона кнопки меню».

Поскольку вы хотели бы повторить один и тот же процесс с различными объектами и цветами DOM, вам будет полезно написать функцию и передать аргументы для значения div, которое вы хотели бы изменить, и цвета, который вы хотите изменить хотел бы изменить его.

<script type="JavaScript/text"> 

changeMenuBackground(currentDivID, desiredColor) { 

// get the current div element 
var div = getElementById(currentDivID); 

div.style.backgroundColor = desiredColor; 

} 
<\script> 

Существует два момента взаимодействия с пользователем, когда необходимо изменить цвет фона div. Во-первых, когда пользователь имеет кнопку мыши, а вторая - когда мышь покидает кнопку (в нас известна как mouseOut). Для каждого div, который вы хотите изменить фон, вам придется изменить фон на цвет nw на mouseOver и на mouseOut.

Пример

<div id="firstMenuItem" onmouseover="changeMenuBackground(#firstMenuItem,#333333);" onmouseout="changeMenuBackground(#firstMenuItem,#111111);"><a href="...." /><\div> 

Есть много различных способов достичь того, что вы хотите сделать, но все они требуют использования JavaScript. Этот способ должен быть очень хорошим, хотя вы можете сделать его более эффективным, если учесть его конкретный код. Вставьте теги скриптов только под ваши стили CSS или CSS-листы, но перед телом вашей страницы. Вы должны предоставить идентификатор div, которому предшествует символ # и цвет, который вы хотите изменить, для каждого div в указанном выше формате, чтобы эта функция работала.

Answer 2

Вы можете вставить цвет, просто добавив команду «цвет» в свой ввод или использовать css для установки цвета.

HTML:

<a href="#slide-panel-1">Page 1</a> 
<input type="radio" name="radio-set" id="slide-control-2" color="put your color"/> 

или CSS:

.radio-set 
{ 
background-color: "your color"; 
color: "your color"; 
} 

Надеется, что это поможет

Answer 3

Всех ответов размещены здесь до сих пор есть дать ответ, и все они действительны , В значительной степени, если вы хотите, чтобы каждый отдельный элемент имел свои собственные специальные цвета, вам нужно применить уникальный идентификатор к каждому элементу, а затем применить CSS к этому конкретному идентификатору.

Вы определили свои пункты меню с помощью анкерных метки (<a>), как это:

<a href="#slide-panel-2">Page 2</a> 

Для стиля страницы 2 специально, вам нужно добавить идентификатор страницы 2:

<a href="#slide-panel-1" id="two">Page 2</a> 

А затем применить стили явно на странице 2:

#two { 
    color: #ffffff; 
    background-color: #000000; 
} 

Вы должны будете г o то же самое для каждой страницы. См. Обновление к вашему JSBin here.

Answer 4

u необходимо добавить класс, а затем установить цветовую схему.