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

Question

Good day! 美好的一天！ In this DEMO displays pictures with their descriptions when you hover over the link. 在本演示中，当您将鼠标悬停在链接上时，将显示带有说明的图片。 How to do with the CSS that the picture remains open and hidden when it points to another link? 当图片指向另一个链接时，如何使CSS保持打开和隐藏状态？ HTML: 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: CSS：

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

Or is it only possible with Java? 还是只有Java才有可能？ In this DEMO using JAVA but I do not know how to display a description. 在这个使用JAVA的DEMO中，但我不知道如何显示说明。 And leave the last image shown with the description until it points to no other link? 并保留说明中显示的最后一张图片，直到它指向其他链接为止？

HTML/CSS: 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>

Answer 1

look at this DEMO 看这个演示

HTML: 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: CSS：

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-09-17 14:18:14

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-09-17 14:18:14

解决方案1
2 已采纳 2013-09-17 14:18:14