Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2013, 01:43
Новичок на форуме
Посмотреть профиль Найти все сообщения от crazygangster77
 
Регистрация: 22.03.2013
Сообщений: 8

Как добавить класс к нужному элементу при наведении на определеные ссылки?
Привет Ребята. Я у вас на форуме первый раз подскажите пожалуйста, в jQery не селен, прежде чем писать погуглил.
Нужно при наведении на определенные ссылки (например с индификаторами #s1, #s2, #s3), и есть картинка с индификатором #img1.
Как правильно написать скрипт, чтобы при наведении на ссылки, к картинке добавлялся класс (например hover)?
Библиотеку подключал эту:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Пробовал подключить так.
<script>
$(document).ready(function(){
$('#s1').hover(
 function(){
 $('#img1').addClass('hover')
 });
 function(){
 $('#img1').removeClass('hover')
 });
});
</script>

P.S. В моем случае прописать стили css не получится, там слишком замудренные эффекты.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2013, 01:51
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

$("#s1, #s2, #s3").mouseenter(function(){
      $('#img1').addClass('hover')
    }).mouseleave(function(){
      $('#img1').removeClass('hover')
    });
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2013, 02:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

crazygangster77,
Вариант...
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
   <meta charset="utf-8" />
   <style type="text/css">
   .hover{
     display: block;
   }
   img{
     display: none;
   }

   </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  $(function(){
	$('a[id ^= s]').hover(function(){
		$('#img1').toggleClass('hover')
		  			});
});
  </script>
</head>

<body>
      <a href="1.html" id="s1">Чебурашка</a>
      <a href="2.html" id="s2">Гена</a><br>
      <img id="img1" src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" >
</body>
</html>

Последний раз редактировалось рони, 05.06.2013 в 08:30.
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2013, 02:19
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони,
Ксать в Опере <script src="http://code.jquery.com/jquery-latest.js"></script> перестал фурыжить ... может для кроссбраузерности что-нидь типо:
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>

ну или с гугла ссылку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Accordion на Mootols, как сделать активацию при наведении курсора? gwen Библиотеки/Тулкиты/Фреймворки 1 18.08.2009 00:03
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55