我有一个要实现的 body 系统功能。当用户将鼠标悬停在 body 部位时，它会突出显示并显示有关该特定 body 部位的信息。我已经按照我想要的方式对 CSS 进行了编码，但是我对 JavaScript 一无所知无法在单击正文部分或鼠标离开悬停状态时让信息保持不变。 p>
我搜索了论坛并发现了类似的问题，并花了几个小时试图从其他人的 javascript 解决方案中找出这个问题 - 我正处于需要寻求帮助的地步。
这是我根据我想要的效果制作的 Flash 原型(prototype):
http://inwavemedia.com/temp/proto/Main.html
如果你想看看我现在有什么，这里是实时 HTML:
http://inwavemedia.com/temp/excretory.html
这是我的代码:
<style type="text/css">
#bodysystem-excretory {
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto; padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a {
display: block;
/* text-indent: -9999px;*/
text-decoration: none;
}
#esoph {
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs {
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder {
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a {
height: 94px;
}
#lungs a {
height: 67px;
}
#bladder a {
height: 104px;
}
#esoph a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover {
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span{
display: none
}
.info{
position:relative;
z-index:1124;
color:#000;
}
.info:hover{
z-index:1125;
}
.info:hover span{
display:block;
position:absolute;
top:-30px;
left:155px;
width:370px;
color:#000;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph">
<a href="#" class="info"><span id="esoph-info"><h3>Esophagus</h3><p>This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. </p></span></a>
</li>
<li id="lungs"><a href="#" class="info"><span id="lungs-info"><h3>Lungs</h3></span></a></li>
<li id="bladder"><a href="#" class="info"><span id="bladder-info"><h3>Bladder</h3></span></a></li>
</ul>
最佳答案
以下是您需要进行的必要更改:
<head>
<title>Untitled Page</title>
<style type="text/css">
#bodysystem-excretory
{
width: 618px;
height: 504px;
background: url(excretory.png) no-repeat;
margin: 10px auto;
padding: 0;
position: relative;
border: 1px solid #999;
}
#bodysystem-excretory li
{
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bodysystem-excretory a
{
display: block; /* text-indent: -9999px;*/
text-decoration: none;
}
#esoph
{
left: 85px;
top: 41px;
width: 46px;
height: 94px;
z-index: 10;
}
#lungs
{
left: 76px;
top: 84px;
width: 84px;
height: 68px;
z-index: 20;
}
#bladder
{
left: 87px;
top: 148px;
width: 64px;
height: 104px;
z-index: 30;
}
#esoph a
{
height: 94px;
}
#lungs a
{
height: 67px;
}
#bladder a
{
height: 104px;
}
#esoph a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -25px -561px;
}
#lungs a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -105px -523px;
}
#bladder a:hover
{
background-image: url(excretory.png);
background-repeat: no-repeat;
background-position: -114px -618px;
}
.info span
{
display: none;
}
.info
{
position: relative;
z-index: 1000;
color: #000;
}
#bodysystem-excretory li[selected='true'] .info
{
z-index:1200;
}
#bodysystem-excretory li[selected='true'] .info span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
.info:hover
{
z-index: 1125;
}
.info:hover span
{
display: block;
position: absolute;
top: -30px;
left: 155px;
width: 370px;
color: #000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function SelectOrgan(obj)
{
var parentObj = obj.parentNode;
var organs = document.getElementById("bodysystem-excretory").getElementsByTagName("li");
for (var i = 0, len = organs.length; i < len; i++)
{
organs[i].setAttribute("selected", "false");
}
parentObj.setAttribute("selected", "true");
}
</script>
</head>
<body>
<ul id="bodysystem-excretory">
<li id="esoph" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="esoph-info">
<h3>
Esophagus</h3>
<p>
This is esophagus information. This is esophagus information. This is esophagus
information. This is esophagus information. This is esophagus information. This
is esophagus information. This is esophagus information.
</p>
</span></a></li>
<li id="lungs" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="lungs-info">
<h3>
Lungs</h3>
</span></a></li>
<li id="bladder" selected="false"><a href="#" class="info" onclick="SelectOrgan(this)"><span id="bladder-info">
<h3>
Bladder</h3>
</span></a></li>
</ul>
</body>
</html>
请注意，每个器官都被分配了一个在空间中具有不同位置的绝对位置。如果您让所有这些都保持相同的左侧、顶部、宽度和高度，那么您将达到您的要求。
关于javascript - 当您使用 Javascript 单击或停止悬停时，如何使 CSS 悬停内容保持原样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13657535/