I would like to hover an image and popup a div, without plugins. just basic jquery the jQuery is like this:
<script type="text/javascript">
$(document).ready(function() {
$(".wrapperfortooltip div img").hover(
function() {
$(this).css('border', 'solid 1px #E90E65');
$("div", this).stop().fadeIn();
},
function() {
$(this).css('border', '1px solid #3E3D3D');
$("div",this).stop().fadeOut();
}
);
});
</script>
The HTML is like this:
<div class="wrapperfortooltip">
<div style="position:relative;">
<img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
<div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235px; ">
Message to display nr one
</div>
</div>
<div style="position:relative;">
<img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
<div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235开发者_如何学JAVApx; ">
Message to display
</div>
</div>
</div>
The CSS(for whom might be interested)
.tooltipVzw
{
border: solid 1px #3e3d3d;
color: #cfc6ca;
font-size: 11px;
padding: 9px 9px 9px 9px;
background-image: url(images/tooltipvzwbg.jpg);
background-repeat:repeat-x;
background-color:#1c1c1c;
text-align:left;
line-height: 16px;
}
Now I have to find a way to do modify
$("div", this).stop().fadeIn();
to something like this:
$(this).parent().("div").stop().fadeIn();
So my actual question is: How do I fix the line above so that it works. or am I completely wrong?
As the div
seems to be always the element after the img
you can just use .next()
:
$(this).next().stop().fadeIn();
or with a filter to be on the safe side:
$(this).next('.tooltipVzw').stop().fadeIn();
You could use
$(this).next().stop().fadeIn();
This finds the next sibling and displays it. It's strongly dependent on the DOM structure. A more general solution might be to use $(this).nextAll('div')...
or $(this).parent().find('div')...
.
精彩评论