在下面的示例中，我需要显示，当鼠标悬停在图像或文本上时，图像和文本会悬停。我已经完成了第一个产品的开发，但我也需要它来开发其他产品。我如何实现这一目标？
悬停应该是分开的，而不是为每个元素提供单独的 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>
最佳答案
只是一个忠告...
尝试将图像放在超链接 a 标记内。然后你可以为链接设置一些 CSS 类名，例如 'class="imageLink"。
之后如果在那个class里面给链接和图片都写一个悬停效果，就可以过滤掉那个class里面的图片。这是示例...
.imageLink a:hover
{
... link hover effect ...
}
.imageLink img:hover
{
... image hover effect ....
}
我对此不是很确定。但是，我在其他地方用这种技术取得了类似的效果。
关于javascript - 突出显示图像和文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15061734/