Javascript 如何使用JQuery设置事件处理，使浮动Div在产品行悬停时淡入
基本上，我想做的是使用JQuery设置一个事件处理，以检测鼠标指针何时移动到我的一个产品行上，从而使一个浮动div标记淡入，其中包含一个指向描述该产品的站点的链接 链接： HTML:Javascript 如何使用JQuery设置事件处理，使浮动Div在产品行悬停时淡入,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,基本上，我想做的是使用JQuery设置一个事件处理，以检测鼠标指针何时移动到我的一个产品行上，从而使一个浮动div标记淡入，其中包含一个指向描述该产品的站点的链接 链接： HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Arrays</title> <style> #tbl img { -webkit-transitio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arrays</title>
<style>
#tbl img {
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
#tbl td:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
<center><table id="tbl" border="1">
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Product Images</th>
</tr>
</table>
<script>
var products = [
{
name: "Apple",
description: "It might be fruit, or it might be an iPhone",
imageUrl: "images/apple.jpg"
}, {
name: "Dell",
description: "Buy this one online at dell.com",
imageUrl: "images/dell.jpg"
}, {
name: "IBM",
description: "If you want a mainframe they still have some",
imageUrl: "images/ibm.jpg"
}, {
name: "Toshiba",
description: "Get a discount through SAIT (maybe)",
imageUrl: "images/toshiba.jpg"
}, {
name: "Atari",
description: "Try a classic gaming machine",
imageUrl: "images/atari.jpg"
}, {
name: "Commodore",
description: "64k should be enough for anyone",
imageUrl: "images/commodore.jpg"
}
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
var row = document.createElement("tr");
row.appendChild(createCell(product.name));
row.appendChild(createCell(product.description));
row.appendChild(createImageCell(product.imageUrl));
table.appendChild(row);
});
function createCell(text) {
var cell = document.createElement("td");
cell.innerText = text;
return cell;
}
function createImageCell(url) {
var image = document.createElement("img");
image.setAttribute("src", url);
var cell = document.createElement("td");
cell.appendChild(image);
return cell;
}
</script>
</center>
</body>
</html>
阵列
#tbl img{
-webkit转型：-webkit转型0.5s轻松；
转型：转型0.5s轻松；
}
#tbl td：悬停img{
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}
td{text align:center；}
品名
产品说明
产品形象
var乘积=[
{
名称：“苹果”，
描述：“可能是水果，也可能是iPhone”，
imageUrl:“images/apple.jpg”
}, {
名称：“戴尔”，
description:“在dell.com在线购买此款”，
imageUrl:“images/dell.jpg”
}, {
名称：“IBM”，
描述：“如果你想要一台大型机，他们还有一些”，
imageUrl:“images/ibm.jpg”
}, {
名称：“东芝”，
描述：“通过SAIT获得折扣（可能）”，
imageUrl:“images/toshiba.jpg”
}, {
名称：“雅达利”，
描述：“尝试经典游戏机”，
imageUrl:“images/atari.jpg”
}, {
姓名：“准将”，
描述：“64k对任何人来说都足够了”，
imageUrl:“images/commodore.jpg”
}
];
var table=document.getElementById（“tbl”）；
产品.forEach（功能（产品）{
var行=document.createElement（“tr”）；
appendChild（createCell（product.name））；
appendChild（createCell（product.description））；
appendChild（createImageCell（product.imageUrl））；
表2.追加子项（行）；
});
函数createCell（文本）{
var cell=document.createElement（“td”）；
cell.innerText=文本；
返回单元；
}
函数createImageCell（url）{
var image=document.createElement（“img”）；
setAttribute（“src”，url）；
var cell=document.createElement（“td”）；
子单元（图像）；
返回单元；
}
products.forEach(function(product) {
var row = document.createElement("tr");
row.setAttribute("id", "row"+product.name);
row.appendChild(createCell(product.name));
row.appendChild(createCell(product.description));
row.appendChild(createImageCell(product.imageUrl, product.name));
table.appendChild(row);
//This is the part that appends the hover event
$("#row"+product.name).hover(function(){
//This is for the mouseenter event so show the div here
},function(){
//This is for the mouse out event so youd want to hide the div here
});
});
好的，那么问题出在哪里呢？我到处寻找类似于我的代码，但我不知道如何将div添加到我的表中。这就是我来Stack的原因。你会如何隐藏div？到目前为止，我已经在桌子下面创建了一个div：“www.apple.com”@Kelsey如果你的ID是每个div的行，那将是一个问题。他们一定是独一无二的！！！我不建议让它像AppleDiv，DellDiv等。一旦你有了它，就可以执行
$（“#”+product.name+“Div”）.show（）.hide（）