Question

我有两个按钮，当我单击其中一个按钮时，我希望背景色更改颜色，然后在单击另一个按钮时，更改为背景色。我还希望有一个悬停功能，该功能可以显示如果不透明地单击按钮，按钮的颜色。

我尝试过

button:hover{
   background-color: pink;
   opacity: .5;
}

button:focus{
   background-color: pink;
}

这很好，直到我单击屏幕上的任意位置并且颜色更改消失为止。

我也尝试过

var buttons = $('button');
buttons.click(function() {
  buttons.css('background-color', 'snow');
  $(this).css('background-color', 'pink');
});

这也可以正常工作，除了悬停效果像我希望的那样停止工作。当我将鼠标悬停在按钮上时，您可以看到不透明度发生变化，但不再是粉红色。

是否可以调整这两种尝试中的任何一种以使其正常工作？预先感谢

Answer 1

问题是您的代码将覆盖background-color属性。将!important添加到.button:hover中，它将按您期望的那样工作。下面的代码段：

var buttons = $('button');
buttons.click(function() {
  buttons.css('background-color', 'snow');
  $(this).css('background-color', 'pink');
});

button:hover {
  background-color: pink !important;
  opacity: .5;
}

button:focus {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

Answer 2

正如我所说，使用单选按钮... [编辑] 有两个版本来获取价值事件JS或jQuery

/* jQuery */

  $('input[name="btGrp"]').on('change', function() {
    console.clear();
    console.log ('button is ',  $(this).val());

    // do button stuff...
  });
/* */

/* pure JS * /

  document.querySelectorAll('input[name="btGrp"]').forEach(xRadio=>{xRadio.onchange=evt=>{
    console.clear();
    console.log( 'button is ', evt.target.value);

    // do button stuff...
  }});
/* */

input[type="radio"]        { display: none } 
input[type="radio"]+label  {
    display           : inline-block;
    background-color  : snow;
    border            : 3px solid #7986cb;
    border-radius     : 6px;
    color             : #37474f;;
    width             : 160px;
    padding           : 5px 0;
    text-align        : center;
    margin            : 5px;
}
input[type="radio"]+label:hover            { background-color: lightblue; }

input[type="radio"]:checked + label        { background-color: pink;      }
input[type="radio"]:checked + label:hover  { background-color: lightgreen }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input  id="bt-1" type="radio" name="btGrp" value="b1" >
<label for="bt-1">button 1 </label>
<input  id="bt-2" type="radio" name="btGrp" value="b2" >
<label for="bt-2">button 2 </label>
<input  id="bt-3" type="radio" name="btGrp" value="b3" >
<label for="bt-3">button 3 </label>

如何使按钮在单击时改变颜色，然后在单击其他按钮时又变回原始颜色？

2 个答案: