Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2014, 06:45
Аватар для DENERIK
Аспирант
Отправить личное сообщение для DENERIK Посмотреть профиль Найти все сообщения от DENERIK
 
Регистрация: 28.11.2014
Сообщений: 31

Показ/скрытие "div"
Спецы "CSS", послали меня к спецам "JavaScript"

Вопрос таков :
Как показать/скрыть "div" блок, при наведении/отводе курсора мыши, на другой "div", который находится под третьим "div" ?


Идея была проста :

Наводишь курсор мыши на изображение.
Оно затемняется, и на нём появляются определённые ссылки.

Я думал что обычным CSS управлюсь.
Но поверх второго "div'a" с "background: rgba", есть "div" с декоративным изображением (глянцем).
Который не позволяет использовать псевдокласс ":hover".


Ps: Если не сложно, ответе кодом, с комментариями.
А то я с "JavaScript" ещё не знаком.
Ответить с цитированием
  #2 (permalink)  
Старый 28.11.2014, 06:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Давай разметку и стили свои. Накидай пример. Чтоб было так:
Я - пример


Сделано через [ html run ] [/ html ]
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 28.11.2014, 07:48
Аватар для DENERIK
Аспирант
Отправить личное сообщение для DENERIK Посмотреть профиль Найти все сообщения от DENERIK
 
Регистрация: 28.11.2014
Сообщений: 31

Имхо очень наглядно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>


.A1 {height: 256px;width: 256px;position: absolute}

.A2 {background: rgba(255,255,51,3); top: 50px; left: 50px;}

.A3 {background: rgba(255,51,204,3); top: 80px; left: 100px;}
.A31:hover {background: rgba(155,51,204,3); top: 90px; left: 110px;}

.A4 {background: rgba(153,255,255,3); top: 150px; left: 150px;}


</style>
<body>


<div class="A1 A2">Изображение</div>
<div class="A1 A3 A31">Появляющееся затемнение + ссылки, которые должны появляться, только когда наведёшь курсор мыши.</div>
<div class="A1 A4">Глянец - Который мешает предыдущиму слою</div>


</body>
</html>

Последний раз редактировалось DENERIK, 28.11.2014 в 08:19.
Ответить с цитированием
  #4 (permalink)  
Старый 28.11.2014, 08:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А так сделать - религия не позволяет?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<style>
 
 
.A1 {height: 256px;width: 256px;position: absolute}

.A0 {position: relative}
 
.A2 {background: rgba(255,255,51,3); top: 50px; left: 50px;}
 
.A3 {background: rgba(255,51,204,3); top: 80px; left: 100px;}
.A1:hover .A31 {background: rgba(155,51,204,3); top: 90px; left: 110px;}
 
.A4 {background: rgba(153,255,255,3); top: 150px; left: 150px;}
 
 
</style>
<body>
 
 
<div class="A1 A0">
<div class="A1 A2">Изображение</div>
<div class="A1 A3 A31">Появляющееся затемнение + ссылки, которые должны появляться, только когда наведёшь курсор мыши.</div>
<div class="A1 A4">Глянец - Который мешает предыдущиму слою</div>
 
 </div>
</body>
</html>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 28.11.2014, 09:31
Аватар для DENERIK
Аспирант
Отправить личное сообщение для DENERIK Посмотреть профиль Найти все сообщения от DENERIK
 
Регистрация: 28.11.2014
Сообщений: 31

Спасибо !
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
показ/скрытие дива по событию (Sandr) Общие вопросы Javascript 4 12.08.2011 22:23
Показ/скрытие элементов DOM securelord Элементы интерфейса 15 01.02.2011 13:42