jQuery淡入淡出懸停多個元素
[英]jquery fade in fade out on hover for multiple elements
問題描述
我正在投資組合頁面上，當用戶將鼠標懸停在項目上時，我想使用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屬性？
我很樂意為每個圖片提供單獨的id / 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>
我認為我快到了，因為偽邏輯很有意義，但是它仍然無法正常工作。
干杯
搶
6 個解決方案
解決方案1
4 2011-12-20 16:19:30
在這里，您可以： http : //jsfiddle.net/Mm66A/13/
請不要使用ID字段來命名“ box，box，box”，使用“ box”類表示每個項目都是“ box”類型。 您可以為每個框指定一個唯一ID。
解決方案2
0 2011-12-20 16:08:32
在有效的html中，不能有多個具有相同id元素。 將每個id更改為class並將您的jquery選擇器從$('#box')和$('#boxover')更改$('.box')和$('.boxover') ，這應該對您$('.boxover') 。 。
解決方案3
0 2011-12-20 16:10:03
第一：不要使用相同的id為所有的a S和div秒。 id是元素的唯一標識符，對於元素的“組”，有class屬性。
要顯示/隱藏相應的框，請使用jquery的高級選擇器，嘗試獲取一個位於懸停元素前的框。
解決方案4
0 2011-12-20 16:10:06
您可以這樣做：
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">hello</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">there</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">rob</div></a>
$(function() {
$('.box').hover(over, out);
});
function over(event) {
$('.boxover', this).fadeIn(2000);
$('.boxover', this).css("display", "normal");
}
function out(event) {
$('.boxover', this).fadeOut(2000);
}
在這里擺弄http://jsfiddle.net/rynma/
基本上，您必須使用classes而不是ids因為id必須是唯一的，並且您將context傳遞給jquery選擇器以將選擇限制為上下文（我使用this ）
解決方案5
0 2011-12-20 16:10:51
完全不需要jQuery，這取決於您要定位的瀏覽器。 如果您必須以IE為目標，並且不能立即進行更改而不是進行過渡，則可以像其他海報所提到的那樣，有條件地對此Javascript進行注釋。
解決方案6
0 2011-12-20 16:13:58
我會給每個標簽一個唯一的ID，並給over box一個id為“ over _” + id_of_box_link，然后將id = box更改為class = box，然后您可以通過以下操作應用懸停功能：
您不能有重復的ID。
<a href="javascript:void(0)" class="box" id="over_1"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_1">hello</div></a>
<a href="javascript:void(0)" class="box" id="over_2"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_2">there</div></a>
<a href="javascript:void(0)" class="box" id="over_3"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div id="box_over_3">rob</div></a>
$(".box").hover(
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeIn(2000);
},
function () {
var over_id = '#box_over_' + $(this).attr('id').replace('over_','');
$(over_id).fadeOut(2000);
}
);
在jQuery中使用懸停淡入和淡出元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.