hover и active
Всем привет,как сделать ,чтобы при наведении на картинку появлялся текст ,а при нажатии появлялся другой текст.
Спасибо за внимание |
где появляться должен?
|
j0hnik,
Да это не столь важно .Мне нужно сделать как бы карту с 3 элементами ,когда наводишь на них ,появляется название ,а когда нажимаешь описание.У меня карта ,это как бы весь фон страницы. Вот ,что я сделал
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Карта Москвы.</title>
<link rel="stylesheet" href=rybka.css>
<style>
body{
background: url('map.jpg') no-repeat;
}
.iz1{
position:absolute;
top:370px;
right:970px;
width:10px;
height:10px;
background:url('kvadr.png');
}
.iz2{
position:absolute;
top:400px;
right:1010px;
width:10px;
height:10px;
background:url('kvadr.png');
}
.iz3{
position:absolute;
top:485px;
right:905px;
width:10px;
height:10px;
background:url('kvadr.png');
}
.opis1{
}
.opis2{
}
.opis3{
}
</style>
</head>
<body>
<div class="iz1">
<div="opis1">
Памятник конструктуру оружия Михаилу Колашникову
</div>
</div>
<div class="iz2">
<div class="opis2">
Музей-квартира М.Булгакова
</div>
</div>
<div class="iz3">
<div="opis3">
Красная площадь
</div>
</div>
</body>
</html>
|
<div id="blockIMG">
<img alt="1" id="img1" src="https://javascript.ru/cat/list/dom.gif">
<img alt="2" id="img2" src="https://javascript.ru/cat/list/event.gif">
<img alt="3" id="img3" src="https://javascript.ru/cat/list/donkey.gif">
</div>
<div id="hovAct"></div>
<script>
var imgData = {
img1: {
name: 'название-1',
diskr: 'описание-1'
},
img2: {
name: 'название-2',
diskr: 'описание-2'
},
img3: {
name: 'название-3',
diskr: 'описание-3'
}
};
var blockIMG = document.querySelector('#blockIMG'),
hovAct = document.querySelector('#hovAct');
blockIMG.addEventListener('mouseover', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : '');
blockIMG.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');
</script>
|
Цитата:
.i1{
position:absolute;
top:400px;
right:910px;
width:10px;
height:10px;
}
И еще почему-то в данной ситуации(когда я применяю class i1 ,название и описание не проходят ,если я убираю мышку) Спасибо за внимание |
<style>
.i1{
position:absolute;
top:20px;
right:70px;
}
.i2{
position:absolute;
top:40px;
right:140px;
}
.i3{
position:absolute;
top:60px;
right:210px;
}
</style>
<div id="blockIMG">
<img alt="1" id="img1" class="i1" src="https://javascript.ru/cat/list/dom.gif">
<img alt="2" id="img2" class="i2" src="https://javascript.ru/cat/list/event.gif">
<img alt="3" id="img3" class="i3" src="https://javascript.ru/cat/list/donkey.gif">
</div>
<div id="hovAct"></div>
<script>
var imgData = {
img1: {
name: 'название-1',
diskr: 'описание-1'
},
img2: {
name: 'название-2',
diskr: 'описание-2'
},
img3: {
name: 'название-3',
diskr: 'описание-3'
}
};
var hovAct = document.querySelector('#hovAct');
document.body.addEventListener('mouseover', e => {
hovAct.className = e.target.className;
hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].name : ''
});
document.body.addEventListener('mouseup', e => hovAct.textContent = e.target.tagName == 'IMG' ? imgData[e.target.id].diskr : '');
</script>
|
если блок нужно отодвинуть используйте селектор div.i1 div.i2...
|
| Часовой пояс GMT +3, время: 17:52. |