突出显示图像和文本
突出显示图像和文本
提问于 2013-02-25 15:06:38
在下面的示例中，我需要显示，当鼠标悬停在图像或文本上时，图像和文本会悬停。我已经做了第一个产品的开发，但我需要在其他工作以及这一点。我该如何实现这一点？
悬停应该是单独的，而不是为每个元素提供单独的ids。
示例如下：
<!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>回答 1
Stack Overflow用户
发布于 2013-02-25 15:21:01
给你一个忠告。尝试将图像放在超链接a标记内。然后，您可以设置一些CSS类名称的链接，例如'class="imageLink"。
在此之后，如果您为链接和图像编写了悬停效果，则可以在该类内过滤掉该类中的图像。这里有个例子..。
.imageLink a:hover
{
... link hover effect ...
}
.imageLink img:hover
{
... image hover effect ....
}我不能完全确定这一点。但是，我在其他地方使用这种技术也达到了类似的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15061734
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号