Html 当同级的不透明度更改时，输入将丢失其边距 新标签 取消 好啊

当输入有焦点（即指针在里面）且鼠标在<代码>取消按钮上时，输入失去其左边距

---

完整的代码是

用

div

包装您的

输入

，它将工作

*{
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
#mdnew{
位置：固定；
z指数：2；
宽度：300px；
左：计算（50%-150px）；
顶部：63px；
背景：红色；
边界半径：5px；
溢出：隐藏；
}
#inpnew{
显示：块；
宽度：计算（100%-28px）；
利润率：14px自动；
线高：21px；
大纲：无；
边框：1px实心#999；
边界半径：5px；
填充：0 7px；
}
.左取消{
浮动：左；
宽度：50%；
线高：23px；
光标：指针；
文本对齐：居中；
}
.好的{
浮动：对；
宽度：50%；
线高：23px；
光标：指针；
文本对齐：居中；
}
.leftcancel:悬停，.rightok:悬停{
不透明度：0.8；
}
格布鲁先生{
背景：-webkit线性梯度（至顶部，#003b61，#0099cc）；
背景：线性梯度（至顶部，#003b61，#0099cc）；
颜色：白色；
字母间距：0.5px；
}
.mdtitle{
线高：23px；
文本对齐：居中；
字母间距：0.5px；
}

新标签
取消
好啊

如果您将输入宽度计算为

100%-28px

，则只需将

14px

用于

左边距

和

右边距

：

#inpnew{
利润率：14px；
}
这是因为
的
不透明度
。leftcancel
，
rightok
处于悬停状态，对兄弟姐妹的影响

拆下该部件并进行测试

<div id='mdnew'>
<div class=' gblue mdtitle'>NEW TAG</div>
<input id='inpnew' type='text' autocomplete='off' maxlength=25 placeholder='NEW TAG'>
<div class='gblue leftcancel'>CANCEL</div>
<div class='gblue rightok' id='newok'>OK</div>
<div class='clear'></div>
</div>


更新：

要使用不透明度，请将
位置
和
z索引
添加到
。左取消
和
。右确定

您在
.leftcancel
和
.rightok
上设置的不透明度正在创建新的堆叠上下文，而堆叠上下文会影响z索引。由于您没有手动指定z索引，它们将被自动分配，
.leftcancel
和
.rightok
的值高于
#inpnew
，因为它在标记中出现得较晚

参考：

如果未定位不透明度小于1的元素，则实现必须在其父堆叠上下文中绘制它创建的层，其堆叠顺序与放置的具有“z索引：0”和“不透明度：1”的元素相同


*{
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
#mdnew{
位置：固定；
z指数：2；
宽度：300px；
左：计算（50%-150px）；
顶部：63px；
背景：红色；
边界半径：5px；
溢出：隐藏；
}
#inpnew{
显示：块；
宽度：计算（100%-28px）；
利润率：14px自动；
线高：21px；
大纲：无；
边框：1px实心#999；
边界半径：5px；
填充：0 7px；
}
.左取消{
位置：相对位置；
z指数：5；
浮动：左；
宽度：50%；
线高：23px；
光标：指针；
文本对齐：居中；
}
.好的{
位置：相对位置；
z指数：5；
浮动：对；
宽度：50%；
线高：23px；
光标：指针；
文本对齐：居中；
}
.leftcancel:悬停，.rightok:悬停{
不透明度：0.8；
}
格布鲁先生{
背景：-webkit线性梯度（至顶部，#003b61，#0099cc）；
背景：线性梯度（至顶部，#003b61，#0099cc）；
颜色：白色；
字母间距：0.5px；
}
.mdtitle{
线高：23px；
文本对齐：居中；
字母间距：0.5px；
}

新标签
取消
好啊
这是可行的，但如何解释呢？为什么需要一个额外的div？它很有效，谢谢。但我希望有人能解释为什么原始利润在聚焦之前有效，而在聚焦之后无效。为什么将
鼠标悬停在按钮上是改变边距的触发器？请检查我下面的回答
不透明度
应该是
不透明度
而不是别的意思。无论如何，你已经找到了问题的根源。谢谢。
.leftcancel:hover, .rightok:hover{
    //opacity:0.8;
}