时间戳

首页 > 解决方案 > ton>将鼠标悬停在标签上以更改标签内的按钮颜色

javascript - ton>将鼠标悬停在标签上以更改标签内的按钮颜色

问题描述

标签： javascripthtmlcss

解决方案

首先，您只需要一个按钮来触发 JS onclick 事件。在其他所有情况下，您都使用 div 来设置“按钮”的样式。按钮也不是空标签，因此需要一个结束标签<button>Text</button>

像这样：

a {
  text-decoration: none;
  color: black;
}

a div {
  border: 1px solid black;
  width: min-content;
  white-space: nowrap;
  padding: 5px;
}
<a href=""><div>I'm a Link-Button</div></a>

要在悬停期间更改颜色，您不需要 JS。您可以像这样简单地使用:hover伪选择器：

a {
  text-decoration: none;
  color: black;
}

a div {
  border: 1px solid black;
  width: min-content;
  white-space: nowrap;
  padding: 5px;
}

a:hover div {
  background-color: red;
}
<a href=""><div>I'm a Link-Button</div></a>

当您坚持使用无效的 HTML 并且似乎不理解 :hover 对您的代码的使用相同时：

.hoverMe:hover .changeColor {
  background-color: red;
}
<a class="hoverMe" href="">
  <div class="somediv1">
    <div class="somediv2">
      <div class="somediv3">
        <button class="changeColor">Button 1</button>
      </div>
    </div>
  </div>
</a>


<a class="hoverMe" href="">
  <div class="somediv1">
    <div class="somediv2">
      <div class="somediv3">
        <button class="changeColor">Button 2</button>
      </div>
    </div>
  </div>
</a>

推荐阅读