Not sure why this script is not running:
Help is appreciated
<script src=“http://code.jquery.com/jquery-git.js”></script>
<script>
<!–
$(document).ready(function() {
//call the jQuery Hover Over and Out
$(“.calBox”).hover(over, out);
//Tell the browser to show content
function over(event) {
$(this).next(“.caltextoverlay”).show();
$(this).next(“.calregistertext”).show();
}
//tell the browser to hide content
//going outside the object area
function out(event) {
$(this).next(“.caltextoverlay”).hide();
$(this).next(“.calregistertext”).hide();
}
});
//–>
</script>
html
<li>
<a class=“calBox” href=“#”>
<div>
<span class=“calregistertext”>register ▸</span></span>
<span class=“caltextoverlay”>
<span class=“caldescriptiontext”>Curabitur aliquet cone ni si nection blis septed</span></span>
<img src=“images/cal1.jpg” alt=“” border=“0” height=“150” width=“155”>
</div>
</a>
</li>
css
.caltextoverlay {
position: absolute;
top:95px;
left:0px;
width: 155px;
height: 35px;
color: white;
display: none;
}
.calregistertext {
position: absolute;
top:3px;
left:95px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
display: none;
}
.next() is only going to iterate over siblings of .calbox which is why you’re not getting anything. What you could use in its place is .find() and it should fire off.
One thing I would suggest would be to change your anchor tag to a div tag. You can still use jQuery to bind to the hover event on that class.
You’ll probably come up against the need to make sure that your register text and description stay open because once you go off the calbox it’s going to hide.
If you want to write it custom, I say great. However, if you would be interested in a plugin that could manage this and is a great plugin (IMO) I would check out hoverIntent.
Thank you very much for your help,
Now after understand why it wasn’t working I when back and updated the JQ
here is the updated html and JQ below. And now that I have this working my next step will be injecting the hoverIntent plug-in. Thanks for that.
$(document).ready(function() {
$(“.calBox”).hover(
function() { $(this).children(‘.jqhover’).show(); },
function() { $(this).children(‘.jqhover’).hide(); }
);
});
<li>
<a href=“#”>
<div class=“calBox” >
<span class=“calregistertext jqhover”>register</span>
<span class=“caltextoverlay jqhover”>
<span class=“caldescriptiontext”>Curabitur aliq</span></span>
<p> other stuff in this div</p>
</div>
</a>
</li>
<li>
<a href=“#”>
<div class=“calBox” >
<span class=“calregistertext jqhover”>register</span>
<span class=“caltextoverlay jqhover”>
<span class=“caldescriptiontext”>Curabitur aliq</span></span>
<p> other stuff in this div</p>
</div>
</a>
</li>
One thing I would suggest would be to change your anchor tag to a div tag. You can still use jQuery to bind to the hover event on that class.
So what do keyboarders/laptop users/mobile users do?
(I note the jQuery itself completely ignores those users anyway)