Я работаю над страницей портфолио и хотел бы использовать jquery, чтобы добавить некоторую информацию к изображению, когда пользователь наводит курсор на элемент.
Я совершенно новичок в работе с jquery, так что простоначинаю пачкать руки.
Мне удалось включить и выключить работу над единичным элементом div, но мне нужно, чтобы он работал независимо для каждого.Я предполагаю, что для этого нужен какой-то более динамичный код, но я не уверен, с чего начать.
Если вы посмотрите ниже, у меня есть код, который работает для одного элемента.Div появляется, когда вы наводите курсор на первое изображение.Это структура, которая мне нужна, поскольку реальный портфель имеет эту базовую структуру.Мне просто нужен код, чтобы он работал для двух других.На живом сайте будет несколько всплывающих подсказок.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
#box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
#boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover(over, out);
});
function over(event)
{
$('#boxover').fadeIn(2000);
$('#boxover').css("display","normal");
}
function out(event)
{
$('#boxover').fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">hello</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">there</div></a>
<a href="#" id="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="boxover">rob</div></a>
</body>
</html>
Если бы кто-то мог показать мне, как заставить каждую из них работать независимо, это было бы здорово.
Я предполагаю атрибут rel, как лайтбокс?
Я рад дать каждому изображению отдельный идентификатор / отн.Я просто не хочу копировать CSS.
Надеюсь, это имеет смысл:)
ОК, поэтому я обновил его, но он все еще не работает.Я могу видеть, что происходит, но не уверен в точном синтаксисе, чтобы заставить его работать.
Вот мой новый код:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
position:relative;
width:150px;
height:150px;
float:left;
display:block;
background:black;
margin-right:20px;
}
.boxover{
position:absolute;
top:10px;
left:0px;
width:100%;
height:20px;
z-index:100;
background:white;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('.box').hover(over, out);
});
function over(event){
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function out(event) {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
</script>
</head>
<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>
</body>
</html>
Я думаю, что я почти как псевдологика имеет смысл, но она все еще не работает.
Ура
Роб