Jump to content
  • 0

Каталог


Hol1killer
 Share

Question

Добрый день друзья, начал изучать Jquery и захотелось создать такой типо каталог с логотипами

вот собственно код

jQuery(document).ready(function($) {	
$('.catalog tr td ul').hide();

$('.catalog tr td img').mouseover(function() {
$('.catalog tr td ul:first').slideDown();
});

$('.catalog tr td img').mouseleave(function() {
$('.catalog tr td ul:first').slideUp();
});
});

есть таблица с классом .catalog

в ней 4 ячейки, хотелось бы что бы при наведение на фотографию(img) рядом справа появлялся список ul с логотипами(стили я напишу)

получается что в набор попадают все фотографии в ячейках а не в конкретной ячейки и при наведении на любую фотографию в таблице выводится только первый список! Хотелось бы что при наведении на фотографию в данной ячейки выводился список этой же ячейки

HTML

<table width="100%" border="0" class="catalog">
<tr>
<td><img src="images/katalog/samosval.png" alt="Самосвалы" /><p>Самосвалы </p><ul><li>MAN</li><li>MAZ</li></ul></td>
<td><img src="images/katalog/ukladchiki.png" alt="Укладчики" /><p>Укладчики </p><ul><li>MAN</li></ul></td>
<td><img src="images/katalog/katok.png" alt="Катки"/><p>Катки</p></td>
<td><img src="images/katalog/tiagach.png" alt="Тягач" /><p>Тягачи</p></td>
</tr>
</table>

Подскажите в каком направлении копать!

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Задача описана мутно и у меня есть чувство что это можно сделать pure css

Если ты хочешь получить доступ к родителю кортинки (ячейки), то можешь сделать так:



jQuery(document).ready(function($) {
$('.catalog tr td ul').hide();

$('.catalog tr td img').mouseover(function(event) {
var img = $(event.currentTarget),
td = img.closest('td');
$('ul:first',td).slideDown();
});

$('.catalog tr td img').mouseleave(function() {
var img = $(event.currentTarget),
td = img.closest('td');
$('ul:first',td).slideUp();
});
});

Вот тебе рабочий пример http://jsfiddle.net/ccEwX/1/

Тебе надо почитать про события в JS и JQ в частноти, а еще надо почитать про on в jQ.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy