Question

我想要一个由一些文字和旁边的图标组成的按钮。我可以指定每个在CSS中都有一个：悬停状态来改变它的外观，但是如何安排我的CSS / HTML使得滚动文本看起来也会改变图像悬停状态，反之亦然？

最好避免使用JS。

更新：我摆弄的当前状态...

<a class="close"><div class="closebutt"></div></a>

a.close {
    float:right;
    font-size:12px;
    color: #a7dbe6;
    text-decoration:underline;
}
a.close:hover  {
    color: #fff;
}
a.vs_rewardClose:before {
    content:"Close "
}
.closebutt {
    background: url(images/close.gif) no-repeat;
    display:inline-block;
    width:14px;
    height:14px;
}
.closebutt:hover {
    background-position: 0px -14px;
}

Answer 1

使用您的HTML，更改background-position的{{1}}只是一个问题：

div

通过这种方式，.close:hover > .closebutt { background-position: 0px -14px; }仅在其父级被悬停时才会更改。

这是我在您更新问题之前发布的原始答案：我通常以这种方式组织我的HTML

background-position

编辑：正如@Paul D. Waite在评论中指出，HTML4中的HTML结构无效，因为<a href="#" class="button"> <div class="glyph"></div> <div class="text">Button text</div> </a>只能包含内联元素。因此，为了解决这个问题，我们可以通过这种方式更改结构，a作为span的子项。 CSS保持不变，如果需要，最终会添加a。

display: block

以这种方式

和你的CSS：

<a href="#" class="button">
    <span class="glyph"></span>
    <span class="text">Button text</span>
</a>

通过这种方式，您还可以更改为按钮添加新类的样式：

.button {
  /* .. general style */
}

  .button > .glyph {
    /* .. general style for the glyph, like size or display: block */
    background-image: url('..');
    background-repeat: no-repeat;
    background-position: left top;
  }

  .button > .text {
    /* .. general style for the text, like font-size or display: block */
    text-decoration: none;
  }

  .button:hover > .glyph {
    /* .. change the glyph style when the button is hovered */
    background-position: left bottom;
  }

  .button:hover > .text {
    /* .. change the text style when the button is hovered */
    text-decoration: underline;
  }

和CSS

<a href="#" class="button red">
    <div class="glyph"></div>
    <div class="text">Button text</div>
</a>
<a href="#" class="button gray">
    <div class="glyph"></div>
    <div class="text">Button text</div>
</a>

Answer 2

将两者都包含在一个元素中并添加：hover to this element：

.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}

如何让2个元素在CSS中共享相同的翻转状态？

2 个答案: