jquery - :after selector and overflow 之间的冲突

Question

大家好，我遇到了 css 和 html 的问题 (fiddle)

我的问题是，<div class="bcont"></div>在<div class="square></div>的右边有一个脚本，当鼠标悬停 square 时，它会从右向左滚动<div> .所以，为了让它工作，我必须设置

.square{
  font-family: 'Lobster Two';
  background-color: rgba(196, 196, 193, 0.3);
  /* color: rgba(196, 196, 193, 0.3); */
  color: #000;
  width: 300px; 
  height: 160px; 
  margin:30px; 
  border: solid 10px #000; 
  position: relative;
  overflow: hidden;  /* this! */
}

所以bcont <div>只有当它在 square 内部移动时才会出现在 muoseover .但是，设置 overflow: hidden在 "square"div 上，箭头(由 "square:after"规则创建)没有出现，这让我很难受。 对不起我的英语。

谢谢大家!

Answer 1

如果您不在方框上设置 overflow 属性，而不是从右到左设置 div 动画，您可以在其宽度上设置动画，您可以获得想要的效果。

$('#quotae').hover(function(){
  $(".bcont", this).stop().animate({width:'60px'},{queue:false,duration:300});
  }, function() {
  $(".bcont", this).stop().animate({width:'0px'},{queue:false,duration:300});
});

我的意思是首先将宽度保持为 0，然后再保持为 60 像素；为此，您还需要添加隐藏在 bcont div 上的溢出。

.bcont{
    position: absolute;
    top: 0;
    right: 0px; /* -60 */
    margin: 0;
    padding: 0;
    height: 100%;
    width: 0px;
    overflow:hidden;

}

查看http://jsfiddle.net/sudhanshu414/3sg5Y/10/