0

大家好，我遇到了 css 和 html 的问题（小提琴）

我的问题是，<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>只有当它在squareon内部移动时才会出现muoseover。但是，overflow: hidden在 "square" div 上设置，箭头（由 "square:after" 规则创建）不会出现，这让我很生气。对不起我的英语不好。

谢谢你们 ！

4

1 回答 1

1

如果您不在方形框上提供溢出属性，而不是从右到左为 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/

于 2012-12-26T13:59:03.117 回答