[英]How do I restrict my hovering style to only the button and not the entire table row?
当您将鼠标悬停在按钮上而不是仅仅坐在那里时,我正在尝试为按钮创建不同的样式。 所以我创造了这些风格
.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>
我在做错什么,如何仅悬停鼠标才能在悬停时更改颜色?
更改
.buttonContainer *:hover {
...
}
至
.buttonContainer:hover .saveDetails {
...
}
->将鼠标悬停在容器上,但是您想更改容器内按钮的设置
小提琴: https : //jsfiddle.net/9xfxpfx8/1/
将.buttonContainer *:hover{...}
更改为.buttonContainer:hover{...}
并改变
<input class="btn saveDetails" value="Save" type="submit">
至
<input class="btn buttonContainer saveDetails" value="Save" type="submit">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.