gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:11:46 24 4
gpt4 key购买 nike

美好的一天!在这个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>

最佳答案

看看这个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;
}

关于javascript - 在文本链接悬停上显示图像 CSS 或 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18852241/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com