Всплывающее окно при наведении
У меня есть товары http://magest.bget.ru/catalog/sumki. Как реализовать, чтобы при наведении на конкретный товар появлялась всплывашка (еще один div), как на картинке.
 А если убрать курсор с изображения то всплывашка бы исчезала. Заранее благодарен за любую помощь. |
Цитата:
|
|
Я делаю картинке position:absolute, а ее родителю relative, и это у меня работает только для одной картинки товара. А картинок товара может быть сколько угодно. Правильно ли я понимаю, что средствами css это реализовать невозможно.
|
мне нужно именно не увеличение, а чтобы у картинки менялась прозрачность при наведении и была всплывашка с описанием товара.
|
возможно
картинка_родитель:hover картинка_потомок{
display: block;
}
|
Когда я пытался реализовать это через css я так и делал.Картинка родитель(элемент li) : hover картинка потомок всплывашка с характеристиками. У картинки потомка изначально display:none при наведении block. Но этот вариант работает только для одной картинки, для одного товара. Я так понимаю чтобы работал для всех нужно использовать javascript. Какое решение для такого всплытия можно использовать на javascript если смотреть по первой ссылке. Заранее благодарен за любую помощь.
|
Вы просите готовый скрипт с нуля.
Это работа, и за нее обычно платят деньги. Для таких сообщений предназначен раздел форума "Работа". Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. |
Цитата:
|
Цитата:
|
Я не говорю об интеграции в сайт. Я прошу просто пример чего-то похожего. Вот то что у меня и почему-то оно не работает.
function show() {
var menu = document.getElementByid('my');
my.style.display = 'block';
}
function hide() {
var menu = document.getElementByid('my');
my.style.display = 'none';
}
function init() {
var menu = document.getElementByid('my');
menu.onmouseover = show;
menu.onmouseout = hide;
}
3 функции на первой показывается на второй скрывается. а 3 вызывается через window.onload при загрузке страницы. Но почему-то это у меня не работает. Заранее благодарен за любую помощь. |
Цитата:
Может отделаюсь примером?
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
position: relative;
display: inline-block;
}
li > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: none;
opacity: 0.7;
}
li:hover > div {
display: block;
}
li > .text {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
font-size: 18pt;
display: none;
}
li:hover > .text {
display: block;
}
li > .money {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 24pt;
display: none;
}
li:hover > .money {
display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<div></div>
<p class='text'>text</p>
<p class='money'>1000</p>
</li>
<li>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<div></div>
<p class='text'>text new</p>
<p class='money'>2000</p>
</li>
</ul>
</body>
</html>
|
Цитата:
|
Вопрос не в этом. У меня много товаров не буду же я для каждого товара вручную прописывать div и двигать с помощью позиционирования. (положение всплывашки каждый раз будет разное). Поэтому насколько я понимаю средствами css эту проблему не решить. Вот страничка с товарами. http://magest.bget.ru/catalog/sumki
|
Цитата:
Цитата:
|
Я не спорю код может быть и херовый, но зато простой. Если можешь подскажи что тут исправить. Я так понимаю мою задачу нельзя решить на css.
|
Цитата:
|
Цитата:
|
Цитата:
|
Пмогите пожалуйста, что нужно исправить в моем коде.
|
Цитата:
Цитата:
|
А если серьезно.
|
Цитата:
ты читать вообще умеешь что тебе пишут? Цитата:
|
.product, .product > div {
height: 200px;
width: 200px;
}
.product > div {
opacity: 0;
transition: opacity 0.5s;
}
.product:hover > div {
cursor: pointer;
opacity: 1;
}
<div class="product" style="background-image:url('изображение сумки')">
<div>Контент</div>
</div>
Упс, пока я тут писал, вы уже написали кучу вариантов. :) |
Цитата:
|
А я не прав в том что css здесь неприменим. Если есть какое-то решение с сss то подскажите пожалуйста.
|
Цитата:
|
Vempel, ну можно просто в div каждой сумки вкладывать div с характеристиками.
|
Цитата:
|
Спасибо за помощь. Я разобрался. Никакой javascript тут действительно был не нужен. тему можно закрывать.
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:45. |