I have a simple setup: an image and then a
paragraph with a bit of info that is hidden and then slides up over the image on mouse hover. If I try to apply a border-top that is dashed or dotted onto the
paragraph it simply turns into a solid line. Is this a known issue with a fix? I even tried adding the dotted border through jQuery and it still comes out as a solid line.
<div class="wrap">
<img src="images/fillertxt.jpg" alt="image" />
<img src="images/filler.jpg" class="front" alt="image" />
<p class="info">
This is a short description with a bit of text.
</p>
</div>
.wrap .info {
width:204px;
height:50px;
background:url(images/infobg.jpg) repeat-x #8d9c0c;
color:#f7f5ef;
padding:3px;
position:absolute;
top:142px;
left:0;
border-top:3px dotted #8d9c0c;
}
$(document).ready(function(){
$("p.info").css("border-top","3px dotted #8d9c0c");
$(function(){
bindTypeOne();
$("input[type=radio]").click(function(){
if ($(this).attr("rel") == "type1"){
bindTypeOne();
} else if ($(this).attr("rel") == "type2"){
bindTypeTwo();
}
});
});
function bindTypeOne() {
$("div.wrap").hover(function(){
$(this).children("p.info").stop();
$(this).children(".front").stop().animate({"top":"141px"}, 400);
},function(){
$(this).children("p.info").stop();
$(this).children(".front").stop().animate({"top":"0"}, 700);
});
};
function bindTypeTwo() {
$("div.wrap").hover(function(){
$(this).children(".front").stop();
$(this).children("p.info").stop().animate({"top":"80px","border-top":"3px dotted #8d9c0c"}, 400);
},function(){
$(this).children(".front").stop();
$(this).children("p.info").stop().animate({"top":"142px"}, 700);
});
};
});
