Question

我有4个按钮彼此相邻。我想要的是当我滚动到某一点时，4个按钮的高度和宽度会发生变化。该按钮由2个div组成，因此您只能看到一个div。当鼠标输入div时，底部div会上升，因此您可以看到它们。我的问题是，如果我滚动到那一点，只有底部div的属性改变，但顶部div保持不变。

HTML

        <div class="buttons" class="container">
            <div class="button">
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>
        </div>

Jquery的

        if (scrollPos < somepoint){
            $(".buttons").removeClass("fixedtop");
            $(".button").removeClass("shrink");
            $(".button div").removeClass("shrink");
            }

        if (scrollPos >= somepoint){
            $(".buttons").addClass("fixedtop");
            $(".button").addClass("shrink");
            $(".button div").addClass("shrink");
            }

CSS

.button .shrink{
transition: 0.5s;
width: 100px;
height: 100px;
}  

.button div .shrink{
transition:0.5s;
width: 100px;
height: 100px;
}

“.button div”工作正常，但“.button”却没有。我尝试使用CSS：悬停转换并在那里工作，但是当我滚动到CSS中的那一点时，我无法缩小它。

Answer 1

您似乎不太了解样式的应用方式。例如，.button .shrink不会应用于<div class='button shrink'>，而是应用于以下对<div class='button'><div class='shrink'>中的第二个div。

同样地，.button div .shrink将在div中查找具有类shrink的元素，并且此div应该是类＆＃39;按钮＆＃39;的元素的子元素。您没有满足这些条件的元素，因此您的样式不适用于任何内容。尝试使用.button_shrink代替.button .shrink和.button div.shrink代替.button div .shrink（您需要将$(".button").addClass("shrink");更改为$(".button").addClass("button_shrink");）。< / p>

我想说的话的插图：

＆＃13;

   
.button .shrink{
color:red;
}  

.button div .shrink{
color:blue;
}

＆＃13;

<div class='button shrink'>
  No styles will be applied to this div
  <div class='shrink'>
    This one is red, because it's 'shrink' inside 'button'
    <div class='shrink'>
      This is blue because it's 'shrink' inside a div which is inside 'button'
      </div>
    </div>
  </div>

＆＃13;

我认为您正在尝试做的事情：

＆＃13;

.button_shrink{
    color:red;
    } 

.button div.shrink{
    color:blue;
    }

＆＃13;

 <div class='button button_shrink'>
      Red
      <div class='shrink'>
        Blue
      </div>
</div>

＆＃13;

滚动中的JQuery addClass不起作用

1 个答案: