При наведении на карточку товара в категории

[Гість]

Вообщем, добавил блок .hide_product

Сделал минискрипт, который при наведении на .image делает видимым(добавляет класс) .hide_product

$(document).ready(function(){

 

   $('.image').live('hover',function(){

      $(this).parent().find('.hide_product').toggleClass('show');

 

   });

})

 

 

 

Проблема в том что он каждый раз создает копию блока .hide_product при переключении сетки\списка товаров.

Кто может подсказать решение, или помочь не за бесплатно в крайнем случае ?

http://fr-tdw.com/index.php?route=product/category&path=20

[Marusia]

Я с CSS еще не пробовала. Человек написал, что решено, хотя что там решено не ясно пока)) а вот у вас получилось то, что мне нужно как раз. Можно по подробней, как такое реализовать?

[Гість]

Ну вот скрипт Выше, он при наведении на блок картинки ищет рядом блок hide_product  и добавляет ему класс show. hide_product - по умолчанию скрытый, а show - делает display: block. Ну и соответственно вывел в категории этот блок, забил туда нужные данные, навел красоту и все ) ну почти все, остался глюк этот, видимо есть иное универсальное решение

[Marusia]

Ну вот скрипт Выше, он при наведении на блок картинки ищет рядом блок hide_product  и добавляет ему класс show. hide_product - по умолчанию скрытый, а show - делает display: block. Ну и соответственно вывел в категории этот блок, забил туда нужные данные, навел красоту и все ) ну почти все, остался глюк этот, видимо есть иное универсальное решение

 

Спасибо, хоть какое то продвижение в этом вопросе и результат есть, а то что множит блок это конечно капец. Наверное что то в самом скрипте надо прописать, типа там НЕ РАЗМНОЖАТЬ))) где же умельцы джавашники?)) Помогите решить!!!

[freelancer]

ну так не только добавил hover-эффект, но и зачем-то полез/поломал display

		$('.product-list').attr('class', 'product-grid');
		
		$('.product-grid > div').each(function(index, element) {
			html = '';
			
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image">' + image;
			}
			
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			html += '<div class="hide_product">' ;
			
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="imagehov">' + image + '</div>';
			}
			html += '<div class="namehover">' + $(element).find('.name').html() + '</div>';
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
						
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '</div>' + '</div>';
			$(element).html(html);
		});	

в общем, эту часть следует вернуть в исходное

 

http://voobschem.ru/

[Marusia]

freelancer Отец!!!

[Гість]

Ну так а иначе как, я ведь должен указать этот блок в разметке, потому и добавил его вывод

html += '<div class="hide_product">' ;

[Гість]

И я с Украины, у меня есть слово Взагалі )

[James026]

Я думаю из-за

var image = $(element).find('.image').html();


if (image != null) { 
html += '<div class="image">' + image + '</div>';
}

Поэтому не нужно добавлять

html += '<div class="hide_product">' ;

Потому что первый код и так находит всё то, что упаковано между <div class="image"></div>

[freelancer]

уже добавляется родительский блок image, но у вас почему-то дважды

var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image;
}

вам мало помочь с решением? нужно ещё убедить?