Текст при наведении на картинку
Здравствуйте.
Есть такой код: <div class="img1"></div> <div class="img2"></div> <div class="img3"></div> <div class="img4"></div> <div class="img5"></div> <div class="img6"></div> <div class="worktext"></div> Необходимо, чтобы при наведении на картинки в worktext отображался заданный для изображения текст. Как это реализовать? |
$('.img1').hover(function(){
$('.worktext').html('123kbnv kghkg');
});
И так для каждого. |
Цитата:
|
Цитата:
<div class="img1" data-text="text 1"></div> <div class="img2" data-text="text 1"></div> <div class="img3" data-text="text 1"></div> <div class="img4" data-text="text 1"></div> <div class="img5" data-text="text 1"></div> <div class="img6" data-text="text 1"></div> <div class="worktext"></div>
$('div[class^=img]').hover(function(){
$('.worktext').html($(this).attr('data-text'));
}, function(){
$('.worktext').html('');
})
|
Джон "Капитан" Воробей,
Можно, но не факт, что есть возможность атрибут новый вставить. У вас изящней и лаконичней, но менее универсально. ) Прсто насколько я знаю, зачастую подобные задачи для JS ставятся в случае, когда HTML код не так то легко и поправить. Я бы сделал это еще на этапе формирования хтмл кода в виде:
<style>
.title {
position:relative(absolute);
bottom:0px;
display:none;
}
.img:hover + .title {
display:block;
}
</style>
<div class="img"></div> <div class="title"></div> ... <div class="img"></div> <div class="title"></div> Хотя можно добавить атрибут и с помощью JS, но как ни крути выйдет много строк... |
Цитата:
|
Lemme,
Есть у меня один знакомый, который клепает сайты на WP. На уровне PHP+HTML+CSS он бы решил эту задачу, а вот с JS у него туго. Я от него частенько подобные просьбы о помощи слышу. ) Потому и взял за посылку, что хтмл править нельзя. ))) |
nesnayka, если он знает html,css и еще любой серверный язык, то с простыми вещами он легко разберется с помощью документации=)
|
Lemme,
Ну вот не дается ему JS так просто, как дался РНР. )) |
nesnayka,
Низзя один и тот же код писать 1000000 раз, это нарушает принципы современного проектирования ПО (вообще любого). Если html изменить нельзя (конечно тяжело представить, но допустим), можно замутить что-нить вроде этого
var data = [
{
id:'1',
text:'some text 1'
},
{
id:'2',
text:'some text 2'
},
{
id:'3',
text:'some text 3'
}
];
$(document).ready(function(){
$('div[class^=img]').hover(function(){
var s = $(this).attr('class')
var res = s.slice(3, 4);
function fil(element){
return element.id == res
}
var val = data.filter(fil);
$('.worktext').html(val[0].text)
},function(){
$('.worktext').html('');
});
});
|
| Часовой пояс GMT +3, время: 01:55. |