Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Изменение стиля 
V
    Опции темы
Biff
Дата 26.2.2013, 12:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 55
Регистрация: 12.6.2006

Репутация: нет
Всего: нет



Здравствуйте.  
Как сделать, что бы при наведении мыши  (и удержании) на один класс объекта, менялся  мгновенно стиль другого класса объекта?
Желательно что бы скрипт смотрел на css и там находил нужный стиль класса.  В данный момент мне нужно что бы менялся цвет фона и появлялись границы объекта.
Под классом я подразумеваю class в css.

Скрипт что-то такое:

Код

onload=function(){
var obj;
obj=document.getElementById("myColor");
obj.onmouseover=function(){this.style.color='red'; };
obj.onmouseout=function(){this.style.color='blue';};
 }; 


Только функция должна применяться не для того же элемента на который наводиться мышь, а для другого + нужно подключить сss.

Это сообщение отредактировал(а) Aliance - 26.2.2013, 13:01
PM MAIL   Вверх
Aliance
Дата 26.2.2013, 13:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Ну а в чем проблема?

Если используется jQuery, то все просто:
Код

// при наведении на элемент с id=elem1, элемент с id=elem2 будет приобретать класс .myHoverClass
$(function(){
    $('#elem1').hover(
        function() {
            $('#elem2').addClass('myHoverClass');
        },
        function() {
            $('#elem2').removeClass('myHoverClass');
        }
    );
})


Если говорить про нативный язык, то это делается через свойство className:
Код

document.getElementById("elem1").onmouseover = function() {
    document.getElementById("elem2").className = 'myHoverClass';
}
document.getElementById("elem1").onmouseout = function() {
    document.getElementById("elem2").className = '';
}


Есть еще удобное classList, но оно не везде поддерживается.

Это сообщение отредактировал(а) Aliance - 26.2.2013, 13:10
PM MAIL WWW ICQ Skype   Вверх
Biff
Дата 26.2.2013, 13:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 55
Регистрация: 12.6.2006

Репутация: нет
Всего: нет



Спасибо, буду разбираться.  jQuery пока не пользуюсь.
Вопрос, а надо подключать сss в js файл, что бы он видел класс или достаточно на стр. исполнения скрипта дать ссылку на js и css?


Попробовал Ваш код, что-то не работает

Код

document.getElementById("elem1").onmouseover = function() {
    document.getElementById("elem2").className = 'myHoverClass';
}
document.getElementById("elem1").onmouseout = function() {
    document.getElementById("elem2").className = '';
}



Добавлено через 14 минут и 50 секунд
Вот например, не работает.


Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
window.onload=startList;
document.getElementById("gs").onmouseover = function() {
    document.getElementById("vs").className = 'myHoverClass';
}
document.getElementById("gs").onmouseout = function() {
    document.getElementById("vs").className = '';
}
</script>
<style type="text/css">
   .myHoverClass { 
    font-size: 120%; /* Размер шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
    color: #336; /* Цвет текста */
   }
  </style>
</head>

<body>
<a class="gs" href="#">Ссылка1</a>
<a class="vs" href="#">Ссылка2</a>
</body>
</html>



Это сообщение отредактировал(а) Biff - 26.2.2013, 14:04
PM MAIL   Вверх
Biff
Дата 26.2.2013, 14:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 55
Регистрация: 12.6.2006

Репутация: нет
Всего: нет



А вот через jQuery - работает отлично.
PM MAIL   Вверх
Aliance
Дата 26.2.2013, 14:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Ну начнем с того, что у вас нет в коде элементов с id gs и vs. Есть только элементы с такими классами. Ну а закончим тем, что у вас есть какая-то неопределённая функция startList, которая не нужна в данном контексте, зато методы по работе с DOM подключается так сказать inline в секции head, на момент инициализации который никакого DOM`а еще не существует.

Рабочий пример: http://jsfiddle.net/Aliance/8t3Gs/
PM MAIL WWW ICQ Skype   Вверх
Biff
Дата 26.2.2013, 14:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 55
Регистрация: 12.6.2006

Репутация: нет
Всего: нет



Aliance, 

Спасибо за пример. 
И еще один вопрос, если у меня уже присвоен id, class к изменяемому элементу (со своими стилями), 
то происходит перемешивание классов или id (прим. class="gs myHoverClass") соответственно совмещаются и стили сss, а мне это не к чему,
мне нужно что бы к элементу присвоился новый класс со своими стилями, что можно сделать?  В данном примере использую jQuery. 
PM MAIL   Вверх
Aliance
Дата 26.2.2013, 15:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



У jQuery есть методы addClass и removeClass - добавить и удалить класс соответственно.
У нативного JS есть только доступ к className, содержащий в себе строку внутри class="...", соответственно разделенные через пробел классы (если их несколько).

Отсюда имеем вывод, что если тебе нужно заменить все классы (не зная изначально какие) на какой-то один - то использовать лучше нативную вариацию. Но с другой стороны, если тебе нужно заменить не конкретный класс, а все - это проблема в архитекруте интерфейса, имхо. Так как обычно разные классы с собой не связаны и мешать не должны:

например у нас есть 3 класса:
Код

.bold { font-weight: bold }
.red { color: #f00; }
.blue { color: #00f; }

и элемент:
Код

<span class="bold red">my span</span>


При замене red на blue класс bold никак не должен мешать.

Это сообщение отредактировал(а) Aliance - 26.2.2013, 15:27
PM MAIL WWW ICQ Skype   Вверх
Biff
Дата 27.2.2013, 12:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 55
Регистрация: 12.6.2006

Репутация: нет
Всего: нет



Aliance

Спасибо. Очень помогли smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0489 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.