Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Всплывающая картинка при наведении на позицию

Обсуждение темы Всплывающая картинка при наведении на позицию в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Есть открывающийся список позиций. После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке. Как ...


Закрытая тема
 
Опции темы
Старый 28.05.2016, 12:42   #1
Есть открывающийся список позиций.
После клика - выдвигается к низу список позиций - выбирается нужный нажатием на нужную строку в этом списке.
Как сделать так что бы при наведении на строку (с выпадающим списком) появлялась картинка?

Есть куча (и тележка) примеров - НО, они работают на чистой странице, без всяких там (как например у меня) выпадающих списков.

Что только не пробовал, и прописывал код: code="z-index: 1000" и code="z-index: 100000" - добавлял нули в слои что бы картинку поднять с глубины - не помогает это.
Что же сделать? Как реализовать это?

Прилагаю пример наведение на ссылку = картинка (
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0052)http://megascripts.ru/demo/vspl_kar_naved/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Всплывающая картинка при наведении на ссылку или на картинку</title>

<style type="text/css">
/* Just some styles to set the page layout. */
* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
body {padding:20px; background: #393939 url(http://megascripts.ru/demo/pattern.jpg);}
h1 {font-size:18px;margin:20px 0;color: Yellow;}
h2 {font-size:14px;margin:20px 0;color: Yellow;}
h3 {font-size:14px;margin:20px 0;color: Yellow;}
p {font-size:12px;margin:20px 0;color: Yellow;}
a {font-size:12px;color: red;}
#container {width:960px;margin:0 auto;}
pre {font-family:"Courier New", Courier, monospace;font-size:12px;margin:20px 0;}
</style>
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
</head>
<body>
<div id="container">
<h1>Всплывающая картинка при наведении на ссылку или на картинку</h1>
<h2>Всплывающая картинка при наведении на ссылку</h2>

<a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#">Ссылка<span>Здесь описание<img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500"></span></a>

<h2>Всплывающая картинка при наведении на картинку</h2>

<a class="thumbnail" href="http://megascripts.ru/demo/vspl_kar_naved/index.html#"><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="200px" border="0"><span><img src="./Всплывающая картинка при наведении на ссылку или на картинку_files/43323.jpg" width="500px">Ваш текст</span></a>

</div></body></html>)
- Этот пример не хочет работать с выпадающим списком.

Код моего выпадающего списка:
<div class="col-2" id="ddbullet"><label>Стрелки:&nbsp;</div></label>
<div class="ddbullet">
<select class="form-control input-sm" id="ddbullet" data-bme="Стрелки:&thinsp;" name="D2" style="width: 85px" title="Выбрать здесь или внизу страницы">
<!-- Список стрелок 24 -->
<option> к часам </option>
<option><a href="#4" class="ddbullet" rel="bulletimg5">
№ 04 - 66/100</a></option>
<option><a href="#1" class="ddbullet" rel="bulletimg1" code="z-index: 1000">№ 5 - 66/100</a></option>

<option class="ddbullet" rel="bulletimg5">№ 06 - 66/100 </option>
<option> № 7 - 65/89 </option>
<option> № 8 - 63/90 </option>
<option> № J2 - 70/90/93 </option></select>

- Не хочет работать по примеру страницы которую указал (дал её код) выше.
 
Старый 28.05.2016, 12:42
Ссылки
Старый 31.05.2016, 21:39   #2
-Есть ответ или не кто не знает?