javascript - 具有不同结果的 CSS 圆圈

Question

我看到一个屏幕抓图，蓝色圆圈没问题，但灰色圆圈看起来很有趣，即使有两个相同的 css 和 js？我将不胜感激如何纠正灰色圆圈？我同时使用相同的 css 和 js，但灰色流线型很差。

align top http://www.kerrydeaf.com/circle.png

CSS3

  button {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#003F5F;
  }

  button:hover {
      background-color:#FFCC05; /*47C3D2*/
  }

  buttongrey {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#a8a9a2;
      }

  buttongrey:hover {
      background-color:#FFCC05;
  }

Javascript:

  <script type="text/javascript">
  $("button").click(function() {
    $(this).toggleClass("hover");
  });
  $("buttongrey").click(function() {
    $(this).toggleClass("hover");
  });
  </script>

更新:HTML5

  <div data-role="content"> <div class="content_index"><!--START CONTENT and another at the END -->
          <div id="content_index_left" align="center">
          <ul data-role="listview">
              <li><a href="#page1"><button><img style="vertical-align: middle" src="images/index_10.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page1"><span class="bold_index">Ten tips</span></a></li><br />

              <li><a href="#page2"><button><img style="vertical-align: middle" src="images/index_triadic.svg" width="90%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page2"><span class="bold_index">Triadic Exchange</span></a></li><br />

              <li><a href="#page6"><buttongrey><img style="vertical-align: middle" src="images/index_deafculture.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page6"><span class="bold_index">Deaf Culture</span></a></li>
          </ul>
          </div> 
          <div id="content_index_right" align="center">           
          <ul data-role="listview">
              <li><a href="#page4"><button><img style="vertical-align: middle" src="images/index_video.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page4"><span class="bold_index">Video</span></a></li><br />

              <li><a href="#page3"><button><img style="vertical-align: middle" src="images/index_examples.svg" width="85%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page3"><span class="bold_index">Examples</span></a></li><br />

              <li><a href="#page5"><buttongrey><img style="vertical-align: middle" src="images/index_disability.svg" width="90%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page5"><span class="bold_index">Disability Rights</span></a></li>
          </ul>
          </div>
      </div></div>

Answer 1

html 标签 buttongrey 不存在!! 对我来说，这是解决方案:

HTML:

<li>
  <a href="#page6">
     <button class="grey">
        <img style="vertical-align: middle" src="images/index_deafculture.svg" width="80%" alt="" title="" border="0" class="shadow" />
     </button>
  </a>
</li>

CSS:

.grey {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#a8a9a2;
 }

.grey:hover {
     background-color:#FFCC05;
 }​