Почему onmouseover и onclick не будут работать вместе, устанавливая стили div, и как сбросить стили набора onclick, не теряя onmouseover?

Question

Почему onmouseover и onclick не будут работать вместе, устанавливая стили div, и как сбросить стили набора onclick, не теряя onmouseover?

0

Прежде всего, я должен сказать, что я на очень базовом уровне программирования. Ответ на эти вопросы может быть очень очевиден для некоторых, но я просто не могу придумать способ объединения всего этого. Заранее спасибо.

У меня есть этот код HTML:

<div id="vectores" class="categoria" onclick="this.style.color='#000'; this.style.textDecoration='underline'; mostraVectores('vectores0','vectores')" onmouseover="this.style.color='#000'; this.style.textDecoration='underline'" onmouseout="this.style.color='#999'; this.style.textDecoration='none'">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

Я использую "onclick" здесь, чтобы внести изменения в стили "постоянный", так как я хочу, чтобы это был "пункт меню", и я хочу, чтобы он запускал функции, но также менял его внешний вид, чтобы его можно было легко сказать был ли он выбран или нет. Я использую "onmouseover", чтобы пользователь знал, что указатель "собирается выбирать" все время (меню имеет больше опций).

Проблема в том, что они просто не будут работать вместе. Я думаю, это просто потому, что, как только новый стиль был установлен с помощью "onmouseover", компилятор просто не будет устанавливать тот же стиль для div, если это потребует второе событие (onclick).

Вот код CSS для класса:

.categoria{
color:#999;
font-weight:bold;
padding:2px;
padding-left:10px;
cursor:pointer;
}

Затем я решил внести изменения в стили "постоянный", используя отдельную страницу javascript и следующие функции:

function mostraVectores(cosa1,cosa2){

document.getElementById(cosa1).style.display="block";

document.getElementById('equilibrio').style.color="#999";
document.getElementById('estructuras').style.color="#999";
document.getElementById('centros').style.color="#999";
document.getElementById('momento').style.color="#999";
document.getElementById('inercia').style.color="#999";
document.getElementById('rozamiento').style.color="#999";

document.getElementById('equilibrio').style.textDecoration="none";
document.getElementById('estructuras').style.textDecoration="none";
document.getElementById('centros').style.textDecoration="none";
document.getElementById('momento').style.textDecoration="none";
document.getElementById('inercia').style.textDecoration="none";
document.getElementById('rozamiento').style.textDecoration="none";

document.getElementById(cosa2).style.color="#000";
document.getElementById(cosa2).style.textDecoration="underline";

}

Здесь, как вы можете видеть, есть другие "параметры меню", которые я хочу повернуть серым цветом и без подчеркивания (поскольку они изначально соответствуют css), если эта функция выполняется после других, так что пользователь не делает этого, t заканчивается двумя опциями меню "selected-like", когда он переходит от одной темы к другой. Проблема заключается в том, что путем "сброса" стилей таким образом "onmouseover/onmouseout" в divs перестает работать.

Как это исправить?

user2906055 22 окт. 2013, в 10:17

Источник

0

Старайтесь не использовать длинные строки кода в HTML- onclick , вместо этого создайте функцию для каждого события.
Richard de Wit 22 окт. 2013, в 08:19
0

Почему это? Я имею в виду, даже если синтаксис правильный? Мне просто любопытно / хочу учиться.
user2906055 22 окт. 2013, в 08:29
0

Кстати, когда я оставляю стили, установленные для функции, на отдельной странице javascript, а не загружаю ее с помощью onclick, у меня все еще есть проблема с потерей возможностей onmouseover / onmouseout, как я прокомментировал выше.
user2906055 22 окт. 2013, в 08:33
0

Это лучшая практика. Если у вас есть одна строка кода в onclick это не проблема, например, вызов функции или установка одного атрибута, но старайтесь не использовать больше этого. Это небрежно и более подвержено ошибкам.
Richard de Wit 22 окт. 2013, в 08:38
0

Спасибо! Я буду иметь это в виду. Есть идеи как решить проблему?
user2906055 22 окт. 2013, в 09:16

Показать ещё 3 комментария

Теги:

javascript

html

onclick

styles

onmouseover

1 ответ

Ещё вопросы

Старайтесь не использовать длинные строки кода в HTML- onclick , вместо этого создайте функцию для каждого события.
Почему это? Я имею в виду, даже если синтаксис правильный? Мне просто любопытно / хочу учиться.
Кстати, когда я оставляю стили, установленные для функции, на отдельной странице javascript, а не загружаю ее с помощью onclick, у меня все еще есть проблема с потерей возможностей onmouseover / onmouseout, как я прокомментировал выше.
Это лучшая практика. Если у вас есть одна строка кода в onclick это не проблема, например, вызов функции или установка одного атрибута, но старайтесь не использовать больше этого. Это небрежно и более подвержено ошибкам.
Спасибо! Я буду иметь это в виду. Есть идеи как решить проблему?

Richard de Wit · Accepted Answer · 2013-10-22T07-07-00.000Z

Подход, который вам нужен, - это использовать CSS :hover и назначать класс при нажатии.

HTML

<div id="vectores" class="categoria" onclick="mostraVectores('vectores0','vectores')">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

CSS

.categoria {
    color: #999;
    font-weight: bold;
    padding: 2px;
    padding-left: 10px;
    cursor: pointer;
}

.categoria:hover { /* This is applied on mouseover and removed on mouseout */
    color: #000;
    text-decoration: underline;
}

.categoria.active { /* Not sure what you want when clicked */
    color: #900;
    text-decoration: underline;
}

JS

function mostraVectores(cosa1,cosa2){
    //add this to your function
    this.className += " active";

Я не знал о «className»! Спасибо вам большое! Вы мне очень помогли! Работало отлично!