Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2015, 21:43
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Карточка товара при наведении
Добрый вечер. Подскажите как сделать такое:

Я понимаю, что событие нужно делать при наведении на див, но как расширить его и добавить туда дополнительную информацию?
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2015, 23:01
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

Dark19,
там скорее всего уже есть дополнительная информация,просто у нее стоит display:none,при наведение меняется на block.
Ответить с цитированием
  #3 (permalink)  
Старый 20.05.2015, 07:02
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Такие вещи делаются с помощью css. :hover что такое слышал? position:absolute\relative?
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2015, 09:39
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Сообщение от krasovsky Посмотреть сообщение
Такие вещи делаются с помощью css. :hover что такое слышал? position:absolute\relative?
Слышал. А содержимое в низу как туда добавить в css?
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2015, 13:10
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сообщение от Dark19
Слышал. А содержимое в низу как туда добавить в css?
z=index еще погляди, пригодится.
Увы нет возможности писать тебе пример, но можешь глянуть демку какой нибудь cms-ки или html-шаблона. Таких вот штук тьма особенно в шаблонах для интернет-шопов, если поискать немного точно найдешь пример (вроде стандартный opencart'овский шаблон даже этим же грешит)
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2015, 13:37
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Сообщение от krasovsky Посмотреть сообщение
z=index еще погляди, пригодится.
Увы нет возможности писать тебе пример, но можешь глянуть демку какой нибудь cms-ки или html-шаблона. Таких вот штук тьма особенно в шаблонах для интернет-шопов, если поискать немного точно найдешь пример (вроде стандартный opencart'овский шаблон даже этим же грешит)
Уже все почти вышло. Вот код одной карточки:
<div class="test">
                <a href="#" class="test2">
                    <div class="product">
                        <div class="product-img">
                            <img src="images/product7.png" alt=""/>
                        </div>
                        <h2>Сопутствующие товары</h2>
                    </div>
                </a>
            </div>

блок с содержимым контентом добавляю через jquery вот так:
$('.product').append("<div class='product-popup'><ul><li>Wilo</li><li>Saer</li><li>Grundfos</li><li>Lowara</li><li>Расширительные баки</li></ul></div>");
, стили задал для блоков через css:
Код:
.main-products .test2{
    display: block;
    width: 176px;
    overflow: hidden;
}

.main-products .test:nth-child(3n+1){
    margin-left: 0;
}
.main-products .test2:hover{
    background-color: #fff;
    border: 2px solid #b1cfed;
    box-shadow: 0px 0px 2px 1px #CCC;
}
.test{
    float: left;
    width: 176px;
    overflow: hidden;
    margin-left: 5px;
    padding: 2px;
}
. Потом опять же через jquery меняю стили:
$('.test2').hover(
        function(){
                $(this).css({'position':'absolute', 'z-index':'99999'});
                $(this).find('.product-popup').each(function(){
                $(this).css({'display':'block'});
                })
        },
            function(){
            $('.product-popup').css({'display':'none'});
            $('.test2').css({'position':'static', 'z-index':'1'});
            });

Все вроде бы работает, но каждый последний блок в строке подминает под себя первый в следующей строке и ничего с этим не могу сделать. Почему так выходит?
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2015, 14:40
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

Вам совершенно не нужно добавлять жикури.
Да и html менять не стоит.

Вам предлагали следующее решение.
Создаём див с товаром.
<div class="content">
	<img /><br />
	супер дупер мега штука
</div>

Это основной див который видит у вас пользователь.
Дальше мы решаем по какому пути пойдём: чистым css или js.
Если идём через css. Тогда дописываем снизу к блоку болк, спан, в общем всё что угодно. И тогда получаем:
<div class="content">
	<img /><br />
	супер дупер мега штука
	<div class="dopContent">
		Она умеет так-то так-то и ещё вот так!!!!1111
	</div>
</div>

Для нормального отображения этого дела пишем css
.content{
	width: 100px;
	heigth: 100px;
	position: relative;
	background: #aef;
}
.dopContent{
	position: absolute;
	display: none;
	width: 100px;
	heigth: 20px;
}

Дальше нам надо настроить изменение стилей при наведении. Будем это делать с помощью псевдокласса :hover. .class:hover{тут тот стиль который нужен у блока с классом .class при наведении} .class:hover .dopClass{тут тот стиль который будет у блока с классом .dopClass при наведении на блок с классом .class}
Если вы хотите что либо поменять в .dpoClass он должен быть ОБЯЗАТЕЛЬНО вложен в блок .class.
Дальше мы пишем соответствующие свойства:
.content:hover{
	background: #fff;
}
.content:hover .dopContent{
	display: block;
}

Надеюсь мне простят ссылку почти конкурентов http://htmlbook.ru/css/hover
И если действовать через js, то идея та же. Просто меня стиль элемента с display:none на block и обратно. Не стоит ничего дописывать а потом удалять.

Последний раз редактировалось Leon-on12, 20.05.2015 в 14:45.
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2015, 16:57
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Сообщение от Leon-on12 Посмотреть сообщение
Вам совершенно не нужно добавлять жикури.
Да и html менять не стоит.

Вам предлагали следующее решение.
Создаём див с товаром.
<div class="content">
	<img /><br />
	супер дупер мега штука
</div>

Это основной див который видит у вас пользователь.
Дальше мы решаем по какому пути пойдём: чистым css или js.
Если идём через css. Тогда дописываем снизу к блоку болк, спан, в общем всё что угодно. И тогда получаем:
<div class="content">
	<img /><br />
	супер дупер мега штука
	<div class="dopContent">
		Она умеет так-то так-то и ещё вот так!!!!1111
	</div>
</div>

Для нормального отображения этого дела пишем css
.content{
	width: 100px;
	heigth: 100px;
	position: relative;
	background: #aef;
}
.dopContent{
	position: absolute;
	display: none;
	width: 100px;
	heigth: 20px;
}

Дальше нам надо настроить изменение стилей при наведении. Будем это делать с помощью псевдокласса :hover. .class:hover{тут тот стиль который нужен у блока с классом .class при наведении} .class:hover .dopClass{тут тот стиль который будет у блока с классом .dopClass при наведении на блок с классом .class}
Если вы хотите что либо поменять в .dpoClass он должен быть ОБЯЗАТЕЛЬНО вложен в блок .class.
Дальше мы пишем соответствующие свойства:
.content:hover{
	background: #fff;
}
.content:hover .dopContent{
	display: block;
}

Надеюсь мне простят ссылку почти конкурентов http://htmlbook.ru/css/hover
И если действовать через js, то идея та же. Просто меня стиль элемента с display:none на block и обратно. Не стоит ничего дописывать а потом удалять.
Тут такая странная штука, убираю relative в родительском блоке - работает, ставлю - не работает
Ответить с цитированием
  #9 (permalink)  
Старый 20.05.2015, 19:00
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Leon-on12,
Может подскажите как сделать чтобы бэкграунд с родительского блока обволакивал еще и этот скрытый при его появлении?
Ответить с цитированием
  #10 (permalink)  
Старый 21.05.2015, 18:06
Аспирант
Отправить личное сообщение для Dark19 Посмотреть профиль Найти все сообщения от Dark19
 
Регистрация: 29.04.2014
Сообщений: 82

Спасибо. Разобрался почему не работало так как нужно, там overflow: hidden был у родителя.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 13.01.2012 01:53
Смена фона при наведении Crystal Элементы интерфейса 3 13.10.2011 12:23
Срабатывание ссылок при наведении. progressive jQuery 0 21.12.2010 15:40
Подмена кода php include при наведении на ссылку pavdin Общие вопросы Javascript 29 01.07.2010 18:21