我有这个HTML代码:
<table>
<tr>
<td>
<p id="price">10000</p>
<div class="no" hidden="hidden">Description</div>
</td>
</tr>
</table>
我的jquery代码是:
<script type="text/javascript">
$(document).ready(function(){
$("#price").live("mouseenter", function () {
$(this).next("div.no").show();
});
$("#price").live("mouseleave", function () {
$(this).next("div.no").hide();
});
});
</script>
现在我希望标签处于特定高度。 让我在图片中描述你:
在进入鼠标之前,表格如下:
输入鼠标后,上面的代码会这样:
但我希望得到以下内容: 我怎么能这样做?
答案 0 :(得分:2)
也许这可以帮到你:
我使用hover而不是live,因为你正在重新创建一个“onElementEventMouse”,请在此处查看: http://jsfiddle.net/9bbz5/
<强> HTML:强>
<table>
<tr>
<td>
<p id="price">10000</p>
<div class="no" hidden="hidden">Description</div>
</td>
<td>
<p id="price">10000</p>
</td>
<td>
<p id="price">10000</p>
</td>
</tr>
</table>
<强> CSS:强>
#price {
background-color: yellow;
height:40px;
width: 200px;
}
td {
text-align: center;
}
.no {
background-color: red;
padding: 15px;
margin-top: -30px;
width: 150px;
position: absolute;
}
<强> JS:强>
$(document).ready(function(){
$("p#price").hover(
function () {
$(this).next("div.no").show();
},
function () {
$(this).next("div.no").hide();
});
});
希望它有所帮助!
答案 1 :(得分:0)
使用css给它一个绝对位置,如果由于某种原因div落后于td,则添加一个z-index。
答案 2 :(得分:0)
隐藏原始DIV,对其进行克隆,并将其绝对放置在相对于您悬停的TD的文档中。
类似的东西:
$(document).ready(function(){
var cloned_div;
$("#price").live("mouseenter", function () {
cloned_div = $(this).next("div.no").clone();
// determine position of the hovered TD
// position cloned DIV based on that
// show cloned div
});
$("#price").live("mouseleave", function () {
// destroy / remove cloned div
});
});
关于克隆的jQuery文档:http://api.jquery.com/clone/
答案 3 :(得分:0)
这应该能够通过CSS解决。您可以将div.no设置为负的上边距,使其与p#price
重叠答案 4 :(得分:0)
让我们考虑一下css(仅用于临时目的)
.no{
display:none;
height:10px;
width:10px;
background-color:YELLOW;
}
#price{
background-color: RED;
}
javascript代码如下:
$(document).on("mouseenter","#price", function (e) {
$(this).next("div.no").show().css({
position: "absolute",
marginLeft:e.clientX + "px",
marginTop: e.clientY + "px"
});
});
$(document).on("mouseleave", "#price",function () {
$(this).next("div.no").hide();
});
尝试此代码我相信它会对您获得的内容有所帮助。 我已经为你的测试添加了jsfiddle链接,如下所示: http://jsfiddle.net/CeYkx/1/