I am self-teaching JQuery and have run into a bit of a snag. What I've done is layered a div over the image, set visability to hidden, and use JQuery to state that when I mouseenter the image, the box is visable, and when I mouseleave, the box disappears. This works fine and dandy with Firefox, but in IE, when I mouse over, only the words appear and they don't disappear when the mouse leaves the div.
I know this question has been asked in many various forms, but so far my research has not provided a viable answer. I would greatly appreciate some advice.
My HTML:
<table>
<td class=presentation>
<a href="Capabilities-PDF.html" target="_blank"> <div class="cover hidden1"> Learn About Us </div> </a>
<div class="image1"><img
title="Capabilities"
alt="Capabilities"
src="images/thumbnails/Capabilities.png"
class="img"></div></td>
</table>
</body>
My javascript:
$(document).ready(function(){
$('.image1').mouseover(function(){
$('.hidden1').show();
});
$('.hidden1').mouseout(function(){
$(this).hide();
});
My CSS:
.cover{
background-color: rgba(0, 0, 0, 0.7);
height: 131px;
position: absolute;
width: 175px;
z-index: 1;
text-align: center;
color: ffffff;
font-weight: bold;
text-decoration: none;
}
.hidden1 {
display: none;
}
.image1 {
height: 131px;
width: 175px;
overflow: hidden;
}
