如何在类和悬停元素之间应用元素样式?

我尝试优化我的日历小部件。我想用单独的颜色填充 之间的所有元素selected_first(button:hover参见代码示例):


body {

  background: #000;

}


div {

  counter-reset: btn;

  display: flex;

  flex-flow: row wrap;

  max-width: 200px;

}


button {

  flex: 0 0 20%;

  display: block;

  height: 30px;

  border: 0;

  background-color: #333;

  color: #fff;

  border: 1px solid #000;;

}


button:before {

  counter-increment: btn;

  content: counter(btn);

}


button[value="selected_first"] {

  background: green !important;

}


button[value="selected_first"] ~ button, button:hover {

  background: blue;

}


button[value="selected_first"] ~ button:hover ~ button {

  background: #333;

   }

<div>

  <button></button>

  <button></button>

  <button value="selected_first"></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

  <button></button>

</div>

当鼠标悬停在按钮上时它对我有用。但当没有任何按钮悬停时,它不起作用。它应该看起来像这样: 预期结果

但当没有任何按钮悬停时,它们仍然具有蓝色背景。


慕容3067478
浏览 79回答 1
1回答

MM们

考虑悬停在父元素上body {&nbsp; background: #000;}div {&nbsp; counter-reset: btn;&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; max-width: 200px;}button {&nbsp; flex: 0 0 20%;&nbsp; display: block;&nbsp; height: 30px;&nbsp; border: 0;&nbsp; background-color: #333;&nbsp; color: #fff;&nbsp; border: 1px solid #000;;}button:before {&nbsp; counter-increment: btn;&nbsp; content: counter(btn);}button[value="selected_first"] {&nbsp; background: green !important;}div:hover button[value="selected_first"] ~ button,div:hover button:hover {&nbsp; background: blue;}div:hover&nbsp; button:hover ~ button {&nbsp; background: #333;&nbsp;}<div>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button value="selected_first"></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button>&nbsp; <button></button></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5