所以我想让我的代码做的是当我将i元素悬停在具有某个id的i元素时,我希望我的jquery获取i标签内的文本并将其发回警报。但是这只适用于第一个id,所以我的第二个id = toolt并没有在我将鼠标悬停在它上面时收到警报。无论如何我可以解决这个问题吗? Ť
谢谢!
<?php
?>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<meta charset="utf-8">
<title>Tooltip</title>
<script>
$(document).ready(function(){
$('#toolt').hover(function(){
//MOUSE ENTERS
$('#tooltip').css('display', 'block');
var x = $('#toolt').text();
alert(x);
},function(){
//MOUSE LEAVES
$('#tooltip').css('display', 'none');
});
});
</script>
<style>
#ppp{
position:fixed;
left:200px;
}
#tooltip{
position:absolute;
z-index:2;
width:200px;
padding5px;
background-color:#A7A7A7;
font-size:17px;
border: 2px solid black;
display:none;
}
</style>
</head>
<body>
<div id="tooltip">
Hello fanbois
</div>
<p id="ppp">This is a text that has <i id="toolt">Things</i> inside it <i id="toolt">Stuff</i> </p>
</body>
</html>
答案 0 :(得分:0)
你需要课而不是ids。 ID是唯一标识符,只能使用一次。
将属性id
更改为class
<p id="ppp">This is a text that has <i class="toolt">Things</i> inside it <i class="toolt">Stuff</i> </p>
和jQuery:
$(document).ready(function(){
$('.toolt').hover(function(){
//MOUSE ENTERS
$('#tooltip').css('display', 'block');
var x = $(this).text();
alert(x);
//Here you can use $('#tooltip').text(x); to make text display in the tooltip
},function(){
//MOUSE LEAVES
$('#tooltip').css('display', 'none');
});
});