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

概述我想要一个由一些文本和旁边的图标组成的按钮.我可以指定每个在CSS中都有一个：悬停状态来改变它的外观,但是如何安排我的CSS / HTML使得滚动文本看起来也会改变图像悬停状态,反之亦然？ 最好避免使用JS. 更新：我摆弄的当前状态…… <a class="close"><div class="closebutt"></div></a>a.close { float:right; 我想要一个由一些文本和旁边的图标组成的按钮.我可以指定每个在CSS中都有一个：悬停状态来改变它的外观,但是如何安排我的CSS / HTML使得滚动文本看起来也会改变图像悬停状态,反之亦然？

最好避免使用Js.

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

<a ><div ></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;}

解决方法 使用HTML,更改div的背景位置只需要：

.close:hover > .closebutt {  background-position: 0px -14px;}

通过这种方式,背景位置仅在其父项被悬停时才会更改.

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

<a href="#" >    <div ></div>    <div >button text</div></a>

编辑：正如@Paul D. Waite在评论中指出的那样,这种HTML结构在HTML4中无效,因为a只能包含内联元素.因此,为了解决这个问题,我们可以通过这种方式改变结构,具有作为a的子节点的跨度. CSS保持不变,最终添加display：block如果需要.

<a href="#" >    <span ></span>    <span >button text</span></a>

和你的CSS这样：

.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;  }

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

<a href="#" >    <div ></div>    <div >button text</div></a><a href="#" >    <div ></div>    <div >button text</div></a>

和CSS

.button.red {  background-color: red;}  .button.red > .text {    color: black;  }.button.gray {  background-color: darkgray;}  .button.gray > .text {    color: white;  }

总结

以上是内存溢出为你收集整理的html – 如何让2个元素在CSS中共享相同的翻转状态？全部内容，希望文章能够帮你解决html – 如何让2个元素在CSS中共享相同的翻转状态？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。