Question

美好的一天！在此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>

Answer 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;
}

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

1 个答案: