ton&gt;将鼠标悬停在<a>标签上以更改标签内的按钮</a><a>颜色</a>

Question

我的网页构造为：

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


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

我希望能够更改悬停在特定<a> </a>内的按钮的颜色。 我应该如何编写 javascript 来做到这一点？ 非常感谢你的帮忙！

Answer 1

首先，您只需要一个按钮来触发 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>

在hover期间改变颜色，你不需要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>

Answer 2

这是一个非常基本的问题，检查文档通常可以帮助您。 看看这个

:hover伪选择器的使用将帮助您实现您想要的。 在我们的示例中，我们看到了a:hover操作，它启用了 hover 颜色更改。

 a:hover { background-color: yellow; } a { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; }

 <a href="https://www.w3schools.com">w3schools.com</a> <a href="https://www.wikipedia.org">wikipedia.org</a> <p><b>Note:</b> The:hover selector style links on mouse-over.</p>