Question

我正在尝试使用jQuery ui effect（）来使div滑动。在动画期间，div的font-size设置为100％，但我原来的CSS是font-size：40px。通过使动画移动非常缓慢，我能够发现在动画期间，该方法在我的div上添加了一个包装div，并且包装div是这样的：

<div class="ui-effects-wrapper" style="font-size: 100%; background-color: transparent; border: none; margin: 0px; padding: 0px; position: relative; width: 1150px; height: 64px; float: none; overflow: hidden;">

font-size：100％样式属性会覆盖目标div的原始CSS。现在我当然可以添加！对我的CSS很重要，所以它不会被覆盖，但是我想知道是否有任何其他方法可以更合理地执行此操作而不是粗略地添加！重要的CSS。另外，我想知道将“font-size：100％”添加到包装div的原因是什么。

提前感谢您的帮助。

Answer 1

在您的css文件中添加

.ui-effects-wrapper{overflow-x: visible !important; width: 100% !important; }

Answer 2

ui-effects-wrapper是一种痛苦试图覆盖...我使用以下内容与我试图设置宽度的元素：

<div class="menuContainer"> //this is what the .ui-effects-wrapper acts on
  <div class="menuItem"></div>
  <div class="menuItem"></div>
  <div class="menuItem"></div>
</div>

我无法覆盖.ui-effects-wrapper，所以这就是我用它做的事情。

in css page:
.menuContainer  {  
   top: 160px;
   position: absolute; //important to have
   height: 385px;
   width: 400px;  
   overflow-x: hidden; //this made the width "appear" like it stayed at 400px as is set above.
}

.menuItem {
    width: inherit; //and now everything is 400px and the css doesn't show the    extra crazy that the .ui-effects-wrapper was giving it.
    height: 10%; // made each item 10% of the menuContainer's height. I adjusted to where it looked right based on my font selection, padding, etc
}

jQuery ui effect（）方法覆盖CSS

2 个答案: