Question

每当我将鼠标悬停在按钮上时，我都试图对其上的div进行动画处理，以在文本旁边创建一个“省略号”效果。不知何故我什至无法使div改变颜色，更不用说将其从0缩放到1了。

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover + .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}

   <div class = "central_container">
        <div class ="lower_container">
            <div class="btn">
                <div class="nxt">Next</div>
            </div>
            <div class ="dotdotdot">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

任何帮助将不胜感激！谢谢。

Answer 1

CSS Error: unexpected symbol in: "oper.class FROM "uploads"选择器是“相邻同级组合器”（https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator），但是+不是div.dot的同级，因为它包含在{{1}中}。因此div.btn是相邻的兄弟姐妹。

您可以更改行

div.dotdotdot

到

div.dotdotdot

Answer 2

       .btn {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      text-align: center;
      font-size: 1.3em;
      cursor: pointer;
    }
    
    .btn:hover,.dot{
      background-color: yellow;
    }
    
    .nxt {
      margin-right: 10px;
      text-align: center;
    }
    
    .dotdotdot {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-end;
      padding-bottom: 2px;
    }
    
    .dot {
      background-color: red;
      height: 7px;
      width: 7px;
      margin-right: 5px;
      transition: background-color 1000ms;
    }

    <div class = "central_container">
            <div class ="lower_container">
                <div class="btn">
                    <div class="nxt">Next</div>
                </div>
                <div class ="dotdotdot">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>

Answer 3

问题在于按钮和.dot不在同一div中。请尝试以下代码：

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover ~ .dotdotdot > .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}

<div class = "central_container">
        <div class ="lower_container">
            <div class="btn">
                <div class="nxt">Next</div>
            </div>
            <div class ="dotdotdot">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

Answer 4

编辑：现在可以根据需要运行

您必须使用.btn:hover, .dot:hover { ... }而不是.btn:hover + .dot { ... }

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover, .dotdotdot:hover > .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}

<div class = "central_container">
    <div class ="lower_container">
        <div class="btn">
            <div class="nxt">Next</div>
        </div>
        <div class ="dotdotdot">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

按钮上的CSS按钮悬停效果不起作用

4 个答案: