0

スクリーングラブと青い円は問題ありませんが、2 つの同じ css と js を使用しても灰色の円はおかしいように見えますか? 灰色の円を修正する方法を教えてください。私は同じ css と js の両方を使用していますが、灰色のフェアリングが不十分です。

上揃え 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>
4

1 に答える 1

0

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;
 }​
于 2012-10-10T20:20:49.220 に答える