在下面的示例中，我需要显示，当鼠标在图像或文本上时，图像和文本会悬停。我已经完成了第一个产品的开发，但是我也需要这个来开发其他产品。我如何实现这一目标？
悬停应该是分开的，而不为每个元素提供单独的ID。
以下是示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Slider.css">
<link rel="stylesheet" href="a.css">
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.0-packed.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<script language="javascript">
function hightlight()
{
document.getElementById("textspan").style.color = "blue";
document.getElementById("ul").style.border = "1.5px solid black";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("ul").setStyle("border","1px solid blue");
}
function removehightlight()
{
document.getElementById("textspan").style.color = "black";
document.getElementById("ul").style.border = "1px solid #999";
}
</script>
<style type="text/css">
<!--
.style3 {color: #000000}
-->
</style>
</head>
<body>
<table id="Main" >
<tr>
<td class="tb 1 clearfix"><a id="prev2" class="button" href="a.css"></a></td>
<td id="tb2" class="list_carousel">
<div id="foo2">
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Handbags1.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Wafflemaker.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/camera.jpg" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
<table id="product"><tr><td id="picbox"><div id="ul" onmouseover="hightlight()" onmouseout="removehightlight()"> <img src="Images/Laptop.JPG" alt="picture"></div></td></tr><tr><td onmouseover="hightlight()" onmouseout="removehightlight()"><a class="style1" href="http://etrege.com/ebay_new/index.php"><span class="style3" id="textspan" >This is a product</span></a></td>
</tr><tr><td> </td></tr><tr><td> </td></tr><tr><td> </td></tr><tr>
<td> </td>
</tr></table>
</div></td>
<td id="tb3" class="clearfix"><a id="next2" class="button" href="a.css"></a></td>
</tr>
</table>
<br />
</body>
</html>
答案 0 :(得分：0)
只是一句建议......
尝试将图像放在超链接a标记内。然后，您可以为链接设置一些CSS类名，例如“class="imageLink"。
之后，如果您为链接和图像编写悬停效果，则在该类中，您可以过滤掉该类中的图像。这是一个例子......
.imageLink a:hover
{
... link hover effect ...
}
.imageLink img:hover
{
... image hover effect ....
}
我对此并不完全确定。但是，我在其他地方也用这种技术取得了类似的效果。