Question

我有一个简单的设置：一个图像，然后是一个隐藏了一些信息的段落，然后在鼠标悬停时向上滑动图像。如果我尝试应用一个虚线或点缀在段落上的边框顶部，它只是变成一条实线。这是修复的已知问题吗？我甚至尝试通过jQuery添加虚线边框，它仍然是一个实线。

HTML：

<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>

CSS：

.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;
}

JS：

$(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);
  });
};

});

Answer 1

无法重现您描述的内容（使用Opera）。

检查这个简单的demopage http://jsbin.com/ofoya

请提供可以重现您的问题的工作样本。并包含您使用的浏览器信息。

顺便说一下。您是否知道将background-color和border-color设置为相同的颜色代码？尝试将border-top:3px dotted #8d9c0c;更改为例如border-top:3px dotted #FF0066;

Answer 2

我认为“border-top”不适用于动画。我知道，要在动画中设置边框宽度，您必须使用borderWidth而不是border-width。所以请尝试同样使用。希望它会有所帮助：）

Answer 3

如果你使用jquery ui，

border-top会起作用，但你需要将它改为“borderTop”。可悲的是，我发现你必须定义每个边界

$(this).stop().animate({
    backgroundColor: "#000",
    borderRightColor: "#09c",
    borderLeftColor: "#09c",
    borderTopColor: "#09c",
    borderBottomColor: "#09c"
}, "slow");

如果使用jQuery对象进行动画处理，则Dotted Border会变为实体

3 个答案: