gpt4 book ai didi

javascript - 使用链接更改图像悬停文本列表

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

我正在尝试设置一个如下图所示的页面。

http://i.stack.imgur.com/GwRXf.png

当我“悬停”在附近列出的其中一个链接(表格或列表)上以禁用“点击”行为时,我希望替换主图像。

我尝试按照以下代码使用 css 执行此操作: http://jsfiddle.net/Kne3d/5/

我试过这样改:

#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}

#gallery td {
display: inline;
padding: 0 1em;
}

#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}

#gallery td:hover {
background: yellow;
}

#gallery td:hover ~ img {
display: block;
}

和:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="100%">Cat 1<img src="/images/01.png"></td>
<td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
</tr>
<tr>
<td>Cat 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Cat 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Cat 4<img src="/images/04.png">
</td>
</tr>
</table>

我希望我的图像显示在右栏中...

我也尝试过使用 Javascript:

<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p><a href="#" onmouseover="showT(0)">• Image 1</a></p>
<p><a href="#" onmouseover="showT(1)">Image 2</a></p>
<p><a href="#" onmouseover="showT(2)">Image 3</a></p>
<p><a href="#" onmouseover="showT(3)">Image 4</a></p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>

但是...没有成功:图像没有显示 :(

知道它是如何工作的吗?

最佳答案

一个非常简单的方法:

$('#nav').find('li').hover(function(){
$('#gallery').find('li').eq($(this).index()).toggle();
});

demo

关于javascript - 使用链接更改图像悬停文本列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14306006/

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