Форум

alexmoreman · #1 (**permalink**) 19.01.2015, 15:47

Вот такой html код

<div class="imgBoxes">
		<div class="imgBox1 special">
			<a href="#1"><img src="images/img1.png" alt="текст"><span class="toltip">текст</span></a>
		</div>
		<div class="imgBox2 special">
			<a href="#2"><img src="images/img2.png" alt="текст"><span class="toltip">текст</span></a>
		</div>		
		<div class="imgBox3 special">
			<a href="#3"><img src="images/img3.png" alt="текст"><span class="toltip">текст</span></a>
		</div>			
		<div class="imgBox4 special">
			<a href="#4"><img src="images/img4.png" alt="текст"><span class="toltip">текст</span></a>
		</div>			
		<div class="imgBox5 special">
			<a href="#5"><img src="images/img5.png" alt="текст"><span class="toltip">текст</span></a>
		</div>	
</div>

при наведении на изображение то свойствами css оно немного увеличивается.
Вопрос: как воспроизвести эффект изображения, при наведении на текст заключенный в тэге span?
Я подумал добавлением класса тегу родителя, написал чушь, которая не работает.

$("span.toltip").hover(
  function() {
	$(this).parent("a").addClass("action")
  }, function() {
	$(this).parent("a").removeClass("action")
  }
);

Помогите решить, заранее спасибо!

рони · #2 (**permalink**) 19.01.2015, 16:31

alexmoreman,
почему не работает ? а css добавили ?

.action img{
     height: 110px;
  }

alexmoreman · #3 (**permalink**) 19.01.2015, 16:40

рони,
незнаю.. и jquery подключен, и очередность подключения скриптов (их 2 всего, сама библиотека и скрипт с этим кодом)
в css все есть.. сам класс не присваивается..

danik.js · #4 (**permalink**) 19.01.2015, 17:16

Поменять img:hover на a:hover img.

Два чайника ))

danik.js · #5 (**permalink**) 19.01.2015, 17:18

Такую чепуху делать через jQuery - ну вы шизики )))

рони · #6 (**permalink**) 19.01.2015, 17:24

Сообщение от alexmoreman

сам класс не присваивается

ой

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .action img{
     height: 110px;
  }
  span{
    display: block;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
     $("span.toltip").hover(
  function() {
	$(this).parent("a").addClass("action")
  }, function() {
	$(this).parent("a").removeClass("action")
  }
);

});


  </script>
</head>

<body>
<div class="imgBoxes">
		<div class="imgBox1 special">
			<a href="#1"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="текст"><span class="toltip">текст</span></a>
		</div>
		<div class="imgBox2 special">
			<a href="#2"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="текст"><span class="toltip">текст</span></a>
		</div>
		<div class="imgBox3 special">
			<a href="#3"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="текст"><span class="toltip">текст</span></a>
		</div>
		<div class="imgBox4 special">
			<a href="#4"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="текст"><span class="toltip">текст</span></a>
		</div>
		<div class="imgBox5 special">
			<a href="#5"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="текст"><span class="toltip">текст</span></a>
		</div>
</div>

</body>

</html>

alexmoreman · #7 (**permalink**) 19.01.2015, 17:26

danik.js,
спасибо!
Ой красота то какая!

Это я шизик)) неповоротливый мозг немного..
оказалось сss усе решил.
но почему класс не добавлялся все равно интересно
P.S. рони, И Вам спасибо! теперь добавляется.. на будущее пригодится)
из за того что не заключил все добро в

$(function(){ });

рони · #8 (**permalink**) 19.01.2015, 17:26

danik.js,
спасибо да такие штуки лучше через css -- но меня интересовало почему рабочий код не работает, а не насколько он правильный

Форум

Справочник

Discord чат

Курсы javascript