在文本链接悬停 CSS 或 JS 上显示图像答案

【问题标题】：Display Image On Text Link Hover CSS or JS在文本链接悬停 CSS 或 JS 上显示图像
【发布时间】：2013-09-22 00:47:17
【问题描述】：

美好的一天！当您将鼠标悬停在链接上时，DEMO 会在此显示图片及其描述。当图片指向另一个链接时，如何处理图片保持打开和隐藏的CSS？ HTML：

<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td><div class='link4'><a href="">tetx link 1
<div><img src="http://i.imgur.com/ArB7hb.jpg" style="float:left; margin: 4px 4px;" />Description of the picture 1 Description of the picture 1 Description of the picture 1 Description of the picture 1 Description of the picture 1 Description of the picture 1</div>
</a></div>
</td>
</tr>
<tr>
<td><div class='link4'><a href="">tetx link 2
<div><img src="http://i.imgur.com/ArB7hb.jpg" style="float:left; margin: 4px 4px;" />Description of the picture 2 Description of the picture 2 Description of the picture 2 Description of the picture 2 Description of the picture 2 Description of the picture 2</div>
</a></div>
</td>
</tr>
<tr>
<td><div class='link4'><a href="">tetx link 3
<div><img src="http://i.imgur.com/ArB7hb.jpg" style="float:left; margin: 4px 4px;" />Description of the picture 3 Description of the picture 3 Description of the picture 3 Description of the picture 3 Description of the picture 3 Description of the picture 3</div>
</a></div>
</td>
</tr>
</table>

CSS：

a>div { display: none; }
a:hover>div { display: block; }
.link4 {margin-left:5px; margin-right:5px;}
.link4 a {display: block;}

还是只有Java才有可能？在这个DEMO 使用JAVA 但我不知道如何显示描述。并保留显示的最后一张图片和说明，直到它没有指向其他链接？

HTML/CSS：

<script>

function showImg(id,fn){
    var el = document.getElementById(id);
    if(fn) el.innerHTML = '<img src="' + fn + '" />'; else el.innerHTML ='';
}

</script>

<body>

<table width="300" border="1">
    <tr>
        <td><a href="#" onmouseover="showImg('img1','http://html.by/images/icons/icon5.gif')" onmouseout="showImg('img1','')">Href1<div id="img1"></div></a></td>
    </tr>
    <tr>
        <td><a href="#" onmouseover="showImg('img2','http://html.by/images/icons/icon6.gif')" onmouseout="showImg('img2','')">Href2<div id="img2"></div></a></td>
    </tr>
    <tr>
        <td><a href="#" onmouseover="showImg('img3','http://html.by/images/icons/icon7.gif')" onmouseout="showImg('img3','')">Href3<div id="img3"></div></a></td>
    </tr>
    </table>

【问题讨论】：

您使用的是 JavaScript，而不是 Java。两种不同的语言。

标签： javascript css image hover

【解决方案1】：

看看这个DEMO

HTML：

<ul>
  <li> first item
    <div> text here text here text here text here text here text here </div>
  </li>
  <li> first item
    <div> text here text here text here text here text here text here </div>
  </li>
  <li> first item
    <div> text here text here text here text here text here text here </div>
  </li>
</ul>

CSS：

li {
    border: 1px solid;
}
li div {
    display: none;
}
li:hover div {
    display: block;
}

【讨论】：