如何将我的悬停样式限制为仅按钮而不是整个表格行？答案

【问题标题】：How do I restrict my hovering style to only the button and not the entire table row?如何将我的悬停样式限制为仅按钮而不是整个表格行？
【发布时间】：2017-02-20 14:24:03
【问题描述】：

当你将鼠标悬停在按钮上时，我试图为按钮创建不同的样式，而不是当它只是坐在那里时。所以我创造了这些样式

.btn {
    font-family: "Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 20px;
    font-size: 0.8125em;
    text-rendering: optimizeLegibility;
    max-width: 100%;
margin: 0;
line-height: 1.42;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
border: 1px solid transparent;
-moz-user-select: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
    text-indent: 0rem;
    display: inline-block;
    height: 1.42em; /* Same as line-height */
    box-sizing: content-box;
}

.buttonContainer *:hover {
    margin: 0 0 0px 0;
    text-rendering: optimizeLegibility;
    cursor: pointer;
    background-color: silver;
}

这可行，除非我将鼠标悬停在按钮上，否则整个表格行都会改变颜色 — https://jsfiddle.net/eyettch5/ 。这是HTML

    <tr><td colspan="2" align="center">
      <span class="buttonContainer"><form class="button_to" method="post" action="/user_race_time_matches/create?id=2194be1c-6831-4c8a-b096-34e25e6284bb" data-remote="true"><input class="btn saveDetails" value="Save" type="submit"><input name="authenticity_token" value="peb/GNeHaRFs+9DGeqbxRh5tK8yuURQLoN1cOZUEMmCvGyv6Nkpo9gPMjidbjCepZ79Kca44aV5Wrd9+i6NaiA==" type="hidden"></form></span>  
    </td></tr>

我做错了什么，如何在悬停时仅让相关按钮更改颜色？

【问题讨论】：

标签： html css button hover html-table

【解决方案1】：

更改您的:hover 目标：

.buttonContainer .saveDetails:hover {}

以上应该可以。

小提琴：https://jsfiddle.net/2fy02obk/

【讨论】：

【解决方案2】：

改变

.buttonContainer *:hover {
  ...
}

到

.buttonContainer:hover .saveDetails {
   ...
}

-> 将容器悬停，但想更改容器内按钮的设置

小提琴：https://jsfiddle.net/9xfxpfx8/1/

【讨论】：

【解决方案3】：

将.buttonContainer *:hover{...} 更改为.buttonContainer:hover{...}

改变

<input class="btn saveDetails" value="Save" type="submit">

到

<input class="btn buttonContainer saveDetails" value="Save" type="submit">

【讨论】：

这不是正确的做法。按钮容器应该是容器而不是按钮本身。