Javascript 将鼠标悬停在HTML/JS/JQUERY中的列表上时会弹出图像
我希望这些图像在我将其悬停在文本上时可见。但根据这一点，它可以工作，但它只选择第一个，因为每个图像都有相同的id。请任何人知道如何解决这个问题。这是我的第一篇文章。如果我在发帖时做错了什么，请原谅。提前谢谢Javascript 将鼠标悬停在HTML/JS/JQUERY中的列表上时会弹出图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望这些图像在我将其悬停在文本上时可见。但根据这一点，它可以工作，但它只选择第一个，因为每个图像都有相同的id。请任何人知道如何解决这个问题。这是我的第一篇文章。如果我在发帖时做错了什么，请原谅。提前谢谢 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Def
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
img
{
position:absolute;
left:250px;
display:none;
}
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<table id="myTable">
<td>
<tr>
<ol id="selectable" onmouseover="show(next,true)" onmouseout="show(next,false)">
<li>Item 1 <img src="next.jpg" id="next"></li>
<li>Item 2 <img src="next.jpg" id="next"></li>
<li>Item 3 <img src="next.jpg" id="next"></li>
<li>Item 4 <img src="next.jpg" id="next"></li>
<li>Item 5 <img src="next.jpg" id="next"></li>
</ol>
</tr>
</td>
</table>
<script type = "text/javascript">
$(document).ready(function() {
$('#selectable').fadeIn('very slow');
});
</script>
<script language="javascript">
//function to display the immage
function show(id,disp) {
if (disp == true) {
id.style.display = "block";
}
if (disp == false) {
id.style.display = "none";
}
}
</script>
</body>
</html>
元素的id不应相同。您可以使用相同的类，并在show函数中传递类名 更新：将mouseover和mouseout事件放在单个lis上，而不是放在ol上，以获取特定元素
<ol id="selectable">
<li>Item 1 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
<li>Item 2 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
<li>Item 3 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
<li>Item 4 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
<li>Item 5 <img src="next.jpg" class="next" onmouseover="show(this,true)" onmouseout="show(next,false)"></li>
</ol>
当您使用ID进行处理时，请使用以下命令，使ID不同
<li>Item 1 <img src="next.jpg" id="next1" ></li>
<li>Item 2 <img src="next.jpg" id="next2" ></li>
<li>Item 3 <img src="next.jpg" id="next3" ></li>
<li>Item 4 <img src="next.jpg" id="next4" ></li>
<li>Item 5 <img src="next.jpg" id="next5" ></li>
你不能让id的名称相同。使用类。ID和类之间的区别在于ID可以用来标识一个元素，而类可以用来标识多个元素。谢谢你的回复。但是我已经想到了，我不知道如何传递它。@Vithushan，你不知道如何传递id吗？@Vithushan，你不能用动态id生成标签吗？您必须实现这种方法，就好像您使用类一样，它将应用于所有元素，img标记非常感谢您的回复。但它不起作用。我假设，即使我们按类传递，因为名称相同，它也取第一个元素。你知道吗，先生？我假设当我们将鼠标悬停在图像上时，它只在图像实例中声明。再次感谢您的回复。这次将选择适用的li。如果它回答了您的问题，请将其标记为您的答案
<li>Item 1 <img src="next.jpg" id="next1" ></li>
<li>Item 2 <img src="next.jpg" id="next2" ></li>
<li>Item 3 <img src="next.jpg" id="next3" ></li>
<li>Item 4 <img src="next.jpg" id="next4" ></li>
<li>Item 5 <img src="next.jpg" id="next5" ></li>