图像上的 HTML 粗体文本悬停
HTML Bold Text on Image hover
所以，这是我的测试 HTML 页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>TEST</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body {font-family: Papyrus;font-size:22px;color: #FFFFFF;background-color: #000000;}
.ntable {font-family: Papyrus;font-size:16px;color:#FFFFFF;width:100%;border-width: 1px;border-color: #000000;border-collapse: collapse;background-color:#000000; margin-left:20px;}
.ntabletd {font-family: Papyrus;font-size:16px;border-width: 1px;padding: 4px;border-style: solid;border-color: #000000;}
.ntablett {font-family: Papyrus;font-size:20px;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;background-color:#000000;font-weight:bold;color:white;}
.ntable td:hover {font-weight: bold;}
.ntitle {font-family: Papyrus;font-size: 24px;padding: 8px;background-color: #000000;font-weight: bold;color: white;text-align: left;text-decoration: underline;}
.ttl2 {text-align:center;font-size:20px;color:#555555;}
</style>
</head>
<body>
<table style="width: 18%" align="left" class="ntable" cellpadding="2">
<tr>
<th class="ntitle" style="width: 190px">Naviagtion</th>
</tr>
<tr id="bb">
<td onmousedown="return false;" name="home" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" style="width: 300px"><a href="home.html" style="text-decoration: none; color:white">Home<span style="margin-left:46px;">|</span><span style="margin-left:10px;">Menu principal</span></a></td>
</tr>
<tr id="bb2">
<td onmousedown="return false;" name="gallerie" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" style="width: 300px"><a href="gallerie.html" style="text-decoration: none; color:white">Galerien<span style="margin-left:28px;">|</span><span style="margin-left:10px;">Galeries</span></a></td>
</tr>
<tr id="bb3">
<td onmousedown="return false;" name="gaestebuch" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" style="width: 300px"><a href="gaestebuch.html" style="text-decoration: none;color:white">Gästebuch<span style="margin-left:11px;">|</span><span style="margin-left:10px;">Livre d'Or</span></a></td>
</tr>
<tr id="bb4">
<td onmousedown="return false;" name="links" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" style="width: 300px"><a href="links.html" style="text-decoration: none;color:white">Links<span style="margin-left:51px;">|</span><span style="margin-left:10px;">Liens</span></a></td>
</tr>
<tr id="bb5">
<td onmousedown="return false;" name="impressum" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" style="width: 300px"><a href="impressum.html" style="text-decoration: none;color:white">Impressum<span style="margin-left:19px;">|</span><span style="margin-left:10px;">Contact</span></a></td>
</tr>
</table>
<table style="margin-top:100px; width: 481px" cellpadding="0" cellspacing="0" align="center"">
<tr>
<td style="width: 485px"><img onmousedown="return false;" alt="" height="363px" src="http://www7.pic-upload.de/05.04.14/np8rxs113nz.png" width="481" /></td>
<td rowspan="7"><img onmousedown="return false;" alt="" height="633px" name="changer" src="http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png" width="363px" /></td>
</tr>
<tr>
<td style="width: 485px"><a href="home.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/5286mnzt75n2.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png', b.fontWeight='bold'" onmouseout="home.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="gallerie.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/kxg6kzelggm.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png', b2.fontWeight='bold'" onmouseout="bb2.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="gaestebuch.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/z9xewd21v4u.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png', bb3.fontWeight='bold'" onmouseout="bb3.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="links.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/tcuzr5l81u2a.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png', bb5.fontWeight='bold'" onmouseout="bb5.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="impressum.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/yrcz87mzezjk.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png', bb4.fontWeight='bold'" onmouseout="bb4.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><img onmousedown="return false;" alt="" height="120px" src="http://www7.pic-upload.de/05.04.14/ebr7b6nfhle.png" width="481px" /></td>
</tr>
</body>
</html>
您可以看到，在左侧表格中，将文本悬停为粗体没有问题。但我想要的是，你可以在右侧的图片中移动。因此，当您在第一个"框架"上时，文本"主页"会变粗。在第二个"框架"上，文本"Galierien"变得粗体。
我现在尝试了很多东西。我可以用其他图片毫无问题地做到这一点，但在这里不能解决这些。希望有人可以帮助我，我到处寻找！
哦，对不起，我的英语不好，我是瑞士人。
ID 菜单 a 以获得粗体，例如。 id="home" .然后，添加以下代码：
要onmouseover ：
document.getElementById('home').style.fontWeight='bold';
致onmouseout ：
document.getElementById('home').style.fontWeight='normal';
下面我附上示例，使"工作"成为"家"链接，休息是给你的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>TEST</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body {font-family: Papyrus;font-size:22px;color: #FFFFFF;background-color: #000000;}
.ntable {font-family: Papyrus;font-size:16px;color:#FFFFFF;width:100%;border-width: 1px;border-color: #000000;border-collapse: collapse;background-color:#000000; margin-left:20px;}
.ntabletd {font-family: Papyrus;font-size:16px;border-width: 1px;padding: 4px;border-style: solid;border-color: #000000;}
.ntablett {font-family: Papyrus;font-size:20px;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;background-color:#000000;font-weight:bold;color:white;}
.ntable td:hover {font-weight: bold;}
.ntitle {font-family: Papyrus;font-size: 24px;padding: 8px;background-color: #000000;font-weight: bold;color: white;text-align: left;text-decoration: underline;}
.ttl2 {text-align:center;font-size:20px;color:#555555;}
</style>
</head>
<body>
<table style="width: 18%" align="left" class="ntable" cellpadding="2">
<tr>
<th class="ntitle" style="width: 190px">Naviagtion</th>
</tr>
<tr id="bb">
<td onmousedown="return false;" name="home" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'" style="width: 300px"><a id="home" href="home.html" style="text-decoration: none; color:white">Home<span style="margin-left:46px;">|</span><span style="margin-left:10px;">Menu principal</span></a></td>
</tr>
<tr id="bb2">
<td onmousedown="return false;" name="gallerie" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'" style="width: 300px"><a href="gallerie.html" style="text-decoration: none; color:white">Galerien<span style="margin-left:28px;">|</span><span style="margin-left:10px;">Galeries</span></a></td>
</tr>
<tr id="bb3">
<td onmousedown="return false;" name="gaestebuch" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png'" style="width: 300px"><a href="gaestebuch.html" style="text-decoration: none;color:white">Gästebuch<span style="margin-left:11px;">|</span><span style="margin-left:10px;">Livre d'Or</span></a></td>
</tr>
<tr id="bb4">
<td onmousedown="return false;" name="links" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png'" style="width: 300px"><a href="links.html" style="text-decoration: none;color:white">Links<span style="margin-left:51px;">|</span><span style="margin-left:10px;">Liens</span></a></td>
</tr>
<tr id="bb5">
<td onmousedown="return false;" name="impressum" class="ntabletd" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" onmouseout="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png'" style="width: 300px"><a href="impressum.html" style="text-decoration: none;color:white">Impressum<span style="margin-left:19px;">|</span><span style="margin-left:10px;">Contact</span></a></td>
</tr>
</table>
<table style="margin-top:100px; width: 481px" cellpadding="0" cellspacing="0" align="center"">
<tr>
<td style="width: 485px"><img onmousedown="return false;" alt="" height="363px" src="http://www7.pic-upload.de/05.04.14/np8rxs113nz.png" width="481" /></td>
<td rowspan="7"><img onmousedown="return false;" alt="" height="633px" name="changer" src="http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png" width="363px" /></td>
</tr>
<tr>
<td style="width: 485px"><a href="home.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/5286mnzt75n2.png" width="481px" onmouseover="document.getElementById('home').style.fontWeight='bold'; changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png', b.fontWeight='bold'" onmouseout="document.getElementById('home').style.fontWeight='normal'; home.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/ycgxxuzcxnaf.png'"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="gallerie.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/kxg6kzelggm.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png', b2.fontWeight='bold'" onmouseout="bb2.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/lscr4s5jkoqx.png'"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="gaestebuch.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/z9xewd21v4u.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png', bb3.fontWeight='bold'" onmouseout="bb3.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/oi52nbegnx7.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="links.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/tcuzr5l81u2a.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png', bb5.fontWeight='bold'" onmouseout="bb5.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/frttgb5tx3aa.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><a href="impressum.html"><img onmousedown="return false;" alt="" height="30px" src="http://www7.pic-upload.de/05.04.14/yrcz87mzezjk.png" width="481px" onmouseover="changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png', bb4.fontWeight='bold'" onmouseout="bb4.fontWeight='normal', changer.src='http://www7.pic-upload.de/05.04.14/v355b61s29yw.png';"/></td>
</tr>
<tr>
<td style="width: 485px"><img onmousedown="return false;" alt="" height="120px" src="http://www7.pic-upload.de/05.04.14/ebr7b6nfhle.png" width="481px" /></td>
</tr>
</body>
</html>
祝你好运。
你应该创建一个上面例子的工作JSFiddle。你的代码很混乱。您还应该使用div 而不是菜单表。花一些时间使用 CSS - 从长远来看它会得到回报。此外，尽可能使用 CSS 悬停效果，避免使用内联 JavaScript。
首先，您的代码中存在一些错误。查看 chrome 开发人员工具控制台窗口（按 F12）。
- 您的第二个表标记尚未关闭
- 转换器未在任何地方定义
一旦你解决了这个问题，你的问题很可能会消失。但是，请使用 chrome 开发工具进行验证或发布工作小提琴（就像没有错误的小提琴一样）。
相关文章：
- 当鼠标悬停在文本中的单词上时显示警报
- 如何在悬停时显示文本而不移动页面上的内容
- CSS/HTML:更改文本的值并在悬停时从中心展开
- 使用鼠标悬停JavaScript/HTML显示文本
- 如何在MVC3中显示鼠标悬停在文本上的部分视图
- 绘图悬停文本未显示
- 将鼠标悬停在图像上时显示文本
- 悬停在动画文本上后，文本淡入淡出不会返回
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 文本悬停效果加上背景更改
- JQuery:悬停时文本颜色切换
- 关于帮助文本悬停在 asp.net 上
- jquery更改图像上的文本悬停多次更改
- 一些弹出文本悬停在SVG路径
- 切换文本悬停在图像上
- 将文本悬停以获得完整格式
- Javascript改变文本元素's Alt文本悬停
- 文本悬停在背景图像上时会更改颜色
- 图像上的 HTML 粗体文本悬停
- 切换出链接文本悬停-过渡
