Question

在我的代码中，我有三个按钮（input type="button"）我用来选择不同的div。它们的作用类似于切换按钮（开/关）。

在过去，当按下按钮或重置按钮时，我会使用图像来显示，但我现在想用css来做。我只是不确定如何达到效果。

选择按钮时还需要禁用边框高亮显示。

我已经找到了这方面的例子，但一无所获。

编辑：

行。我现在可以展示一些东西。代码在某种程度上有效。当我按住鼠标按钮时，它显示出凹陷的外观，但是一旦我释放它就会恢复正常而不是保持按下状态。

我删除了不属于此问题的无关代码，以避免混淆。

编辑2：

我注意到（在FireFox中，不确定其他浏览器）按钮的默认外观在单击按钮时显示按下的外观，但在释放鼠标按钮时恢复正常。我想在释放鼠标按钮后保留按下的外观，直到再次单击该按钮，或者直到单击其他按钮为止。

      input:hover { color: teal; }
      .push:active { background: gray; color: aquamarine; }
      .push:inactive { background: white; color: teal; }

      <INPUT type="button" class="push" style="font-weight: bold;">
      <INPUT type="button" class="push" style="font-weight: bold;">
      <INPUT type="button" class="push" style="font-weight: bold;">

编辑最终：

感谢所有帮助我解决此问题的人。我找到了一个更好的解决方案用于我的目的。以下是代码的最终版本。在这个版本中，我只是在单击按钮时更改字体颜色，单击一次时更改为蓝色，如果单击其他按钮则为黑色或第二次单击相同按钮。我是在javascript中做的一切。在修复中，我的翻转highlite破了，修复是使用onMouseOver和onMouseOut而不是使用：hover in head中的样式标记。有趣的是，当我将其粘贴到片段运行器并将javascript与html分开时，它似乎不想工作。

翻转有效，但当我将鼠标移开时，所选按钮不会显示蓝绿色字母。无论如何，代码在这里是为了那些想要玩它的人。

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Sample Solution Page</TITLE>
    <SCRIPT type="text/javascript">
    <!--
      function visInvis(id,id1,id2,id3,id4,id5,id6) {

        var a = document.getElementById('mySol');
        var a1 = document.getElementById('MM');
        var a2 = document.getElementById('MP');
        var a3 = document.getElementById('MBL');
        var a4 = document.getElementById('MBC');
        var a5 = document.getElementById('MPS');
        var a6 = document.getElementById('MPL');

        var b = document.getElementById('YASS');
        var b1 = document.getElementById('YM');
        var b2 = document.getElementById('YP');
        var b3 = document.getElementById('YBL');
        var b4 = document.getElementById('YBC');
        var b5 = document.getElementById('YPS');
        var b6 = document.getElementById('YPL');

        var c = document.getElementById('Tak');
        var c1 = document.getElementById('TM');
        var c2 = document.getElementById('TP');
        var c3 = document.getElementById('TBL');
        var c4 = document.getElementById('TBC');
        var c5 = document.getElementById('TPS');
        var c6 = document.getElementById('TPL');

        var d;
        var d1 = document.getElementById('MS');
        var d2 = document.getElementById('YS');
        var d3 = document.getElementById('TS');

        var e = document.getElementById(id);
        var e1 = document.getElementById(id1);
        var e2 = document.getElementById(id2);
        var e3 = document.getElementById(id3);
        var e4 = document.getElementById(id4);
        var e5 = document.getElementById(id5);
        var e6 = document.getElementById(id6);

        if(e == a && e.style.display == 'none') {
          d = d1;
          b.style.display = 'none';
          b1.style.display = 'none';
          b2.style.display = 'none';
          b3.style.display = 'none';
          b4.style.display = 'none';
          b5.style.display = 'none';
          b6.style.display = 'none';
          d2.style.color = 'black';

          c.style.display = 'none';
          c1.style.display = 'none';
          c2.style.display = 'none';
          c3.style.display = 'none';
          c4.style.display = 'none';
          c5.style.display = 'none';
          c6.style.display = 'none';
          d3.style.color = 'black';
        }

        if(e == b && e.style.display == 'none') {
          d = d2;
          a.style.display = 'none';
          a1.style.display = 'none';
          a2.style.display = 'none';
          a3.style.display = 'none';
          a4.style.display = 'none';
          a5.style.display = 'none';
          a6.style.display = 'none';
          d1.style.color = 'black';

          c.style.display = 'none';
          c1.style.display = 'none';
          c2.style.display = 'none';
          c3.style.display = 'none';
          c4.style.display = 'none';
          c5.style.display = 'none';
          c6.style.display = 'none';
          d3.style.color = 'black';
        }

        if(e == c && e.style.display == 'none') {
          d = d3;
          a.style.display = 'none';
          a1.style.display = 'none';
          a2.style.display = 'none';
          a3.style.display = 'none';
          a4.style.display = 'none';
          a5.style.display = 'none';
          a6.style.display = 'none';
          d1.style.color = 'black';

          b.style.display = 'none';
          b1.style.display = 'none';
          b2.style.display = 'none';
          b3.style.display = 'none';
          b4.style.display = 'none';
          b5.style.display = 'none';
          b6.style.display = 'none';
          d2.style.color = 'black';
        }

        if(e == a && e.style.display == 'block')
          d = d1;
        if(e == b && e.style.display == 'block')
          d = d2;
        if(e == c && e.style.display == 'block')
          d = d3;

        if(e.style.display == 'block') {
          e.style.display = 'none';
          e1.style.display = 'none';
          e2.style.display = 'none';
          e3.style.display = 'none';
          e4.style.display = 'none';
          e5.style.display = 'none';
          e6.style.display = 'none';
          d.style.color = 'black';
        }
        else {
          e.style.display = 'block';
          e1.style.display = 'block';
          e2.style.display = 'block';
          e3.style.display = 'block';
          e4.style.display = 'block';
          e5.style.display = 'block';
          e6.style.display = 'block';
          d.style.color = 'teal';
        }
      }

      function selectText(divID) //divID contains actual id of ‘div’ element
      {
        var textC=document.getElementById(divID);
        if (document.selection)
        {
          //Portion for IE
          var div = document.body.createTextRange();
          div.moveToElementText(textC);
          div.select();
        }
        else
        {
          //Portion for FF
          var div = document.createRange();
          div.setStartBefore(textC);
          div.setEndAfter(textC);
          window.getSelection().addRange(div);
        }
      }
    -->
    </SCRIPT>
  </HEAD>
  <BODY>
    <TABLE style="float: left; vertical-align: top; width: 17%;">
      <TR><TH style="text-align: left; width: 65%;">Collection:</TH><TH style="width: 35%;">Revenge</TH></TR>
      <TR><TH style="text-align: left;">Level #:</TH><TH style="width: 30%;">1</TH></TR>
      <TR><TH style="text-align: left; vertical-align: top; height: 49.5pt;" colspan="2">Puzzle Name</TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD>Width:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD>Height:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD>Boxes/Goals:</TD><TH style="width: 30%;">0</TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=MS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL');
        selectText('mySol');" value="My Solution"></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=YS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('YASS','YM','YP','YBL','YBC','YPS','YPL');
        selectText('YASS');" value="YASS Solution"></TD></TR>
      <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=TS
        style="font-weight: bold;" onMouseOver="this.style.color='teal'"
        onMouseOut="this.style.color='black'"
        onClick="visInvis('Tak','TM','TP','TBL','TBC','TPS','TPL');
        selectText('Tak');" value="Takaken Solution"></TD></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD>Moves:</TD><TH style="width: 30%;">
        <DIV id=MM style="display: none;">0</DIV>
        <DIV id=YM style="display: none;">0</DIV>
        <DIV id=TM style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pushes:</TD><TH style="width: 30%;">
        <DIV id=MP style="display: none;">0</DIV>
        <DIV id=YP style="display: none;">0</DIV>
        <DIV id=TP style="display: none;">0</DIV></TH></TR>
      <TR><TD>Box lines:</TD><TH style="width: 30%;">
        <DIV id=MBL style="display: none;">0</DIV>
        <DIV id=YBL style="display: none;">0</DIV>
        <DIV id=TBL style="display: none;">0</DIV></TH></TR>
      <TR><TD>Box changes:</TD><TH style="width: 30%;">
        <DIV id=MBC style="display: none;">0</DIV>
        <DIV id=YBC style="display: none;">0</DIV>
        <DIV id=TBC style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pushing sessions:</TD><TH style="width: 30%;">
        <DIV id=MPS style="display: none;">0</DIV>
        <DIV id=YPS style="display: none;">0</DIV>
        <DIV id=TPS style="display: none;">0</DIV></TH></TR>
      <TR><TD>Pusher lines:</TD><TH style="width: 30%;">
        <DIV id=MPL style="display: none;">0</DIV>
        <DIV id=YPL style="display: none;">0</DIV>
        <DIV id=TPL style="display: none;">0</DIV></TH></TR>
      <TR><TD colspan="2"><HR></TD></TR>
      <TR><TD colspan="2">Inactive button means no solution available. Some puzzles YASS cannot solve,
        some Takaken cannot solve, and some I have not solved.</TD></TR>
    </TABLE>
    <TABLE style="float: right; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
      width: 42%; height: 650px;">
      <CAPTION style="align: top; text-align: left; font-weight: bold;">Solution</CAPTION>
      <TR><TD style="vertical-align: top;">
        <DIV id=mySol style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">My Solution</DIV>
        <DIV id=YASS style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">YASS Solution</DIV>
        <DIV id=Tak style="display: none; width: 520px; height: 640px; word-wrap: break-word;
          overflow: auto;">Takaken Solution</DIV>
      </TD></TR>
    </TABLE>
    <TABLE style="float: center; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
      width: 40.3%; height: 650px;">
      <CAPTION style="align: top; text-align: left; font-weight: bold;">Puzzle</CAPTION>
      <TR><TD>
        <PRE style="text-align: center;"></PRE>
      </TD></TR>
    </TABLE>
  </BODY>
</HTML>

`

Answer 1

我认为你所寻找的是一种在点击按钮时改变按钮外观的方法。

你可以做的是在你的css样式表上创建两个css类，一个用于活动按钮，另一个用于非活动按钮。

您的页面以确定状态的按钮开始，因此您可以使用对应的类

创建它们

在您的客户端代码上，单击一个按钮时，您只需更改它的类名，从活动状态更改为非活动状态，反之亦然。

Etvoilá单击按钮时将应用您的样式

Answer 2

如果您想要一个纯粹的HTML和CSS解决方案，您实际上可以使用一个样式的复选框看起来像一个按钮。像这样：

HTML

<input type="checkbox" id="input"/>
<label for="input" id="button">Push me</label>

CSS

input { 
    display: none;
}

#button {
    border: 3px solid #52A7D3;
    background-color: #52A7D3;
    color: #000000;
}


#input ~ #button:active, #input:checked ~ #button{
    background-color: grey;
}

#button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border: 1px solid #999999;
  border-radius: 3px;
}

我已经制作了一个jsFiddle来展示它：http://jsfiddle.net/p0z88ysu/

突出显示“推”和“禁用”状态的按钮

2 个答案:

HTML

CSS