Javascript help disable column link and tooltip
How do I disable javascript click and tooltip.
You can see the problem here http://www.vinderhimlen.dk/vind-rejse-deltag-i-konkurrencer-om-rejser
The rating column should not show a tooltip or be a link.
It is attached on my tabels row:
<tr class="thumbnail-item" onclick="window.open('<%= vind.tracking %>')" onmouseout="this.style.background='white';" onmouseover="this.style.background='#99ff33';this.style.cursor='pointer'">
My tooltip script:
<script type="text/javascript">
$(document).ready(function () {
$('.thumbnail-item').mouseenter(function(e) {
x = e.pageX;
y = e.pageY;
$(this).css('z-index','15')
$(this).css('cursor', 'default')
$(this).find(".tiptip").css({'top': y,'left': x,'display':'block'});
}).mousemove(function(e) {
x = e.pageX;
y = e.pageY;
$(this).find(".tiptip").css({'top': y,'left': x});
}).mouseleave(function开发者_StackOverflow中文版() {
$(this).css('z-index','1')
$(this).css('background', 'none')
$(this).css('color', '#000000')
$(this).find(".tiptip").animate({"opacity": "hide"},100);
});
});
</script>
you should disable the mouseover event to bubble up.
I have run the following script using firebug to achieve the result.
$("#tabel1 tr td:nth-child(2):gt(0)")
.mouseover(
function(event)
{
event.preventDefault();
return false;
});
edited__ As your mouse is over the tooltip, it is not working very good. move your cursor away from tooltip a little bit.
his is where you calculating the mouse points
x = e.pageX;
y = e.pageY;
you sould do it like this
x = e.pageX+3;
y = e.pageY+3;
in both function of mousemove and mouseover
Pretty easy actually. Why don't you just handle the onmouseover/out events in the <td></td>
tags and leave it out on the rating column?
TR background coloring can be achieved by attaching a pseudo-class to the tr tag or the .thumbnail-item class.
tr:hover
{
background-color: #99FF33;
}
精彩评论