0

HTML:

<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>

CSS:

.round{
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#eee;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#000;
}
.round:hover{
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#000;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#fff;
}

そして私の質問に行きます：

  1. テキスト装飾が機能しないのはなぜですか?
  2. ホバーするとテキストの色が変わりますが、下線は変わりません! なんで？
  3. すべての div が次々に垂直に表示されます。画面全体に水平に配置し、画面の最後の 2 行目に自動的に配置するにはどうすればよいですか?
  4. これはベストプラクティスですか？これはどのブラウザで動作しませんか? Safari、Chrome、Firefox のすべての最新バージョンを試してみました。IE8で動くかは不明
4

5 に答える 5

0

color プロパティをアンカー要素に配置します。また、:hover やその他のいわゆる疑似クラスに対して、同一の CSS プロパティを再宣言する必要はありません。経験則としては、可能な限り少ない HTML 要素で最大限のことを行い、セマンティクスを維持することです。IE8 では動作しません。

HTML

<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a> 
<a href="#" class="round">Power and Electricity</a>

CSS

.round {
  color: #000;
  display: inline-block;
  -moz-border-radius:50%;  /* for Firefox */
  -webkit-border-radius:50%; /* for Webkit-Browsers */
  border-radius:50%; /* regular */
  opacity:1; /* Transparent Background 50% */
  background:#eee;
  padding:40px;
  height:70px;
  width:70px;
  text-align: center;
}
.round:hover{
  color: #fff;
  background:#000;
}

http://jsfiddle.net/jbWPX/7/

于 2013-09-27T14:11:48.603 に答える
0

a:hover は div:hover をオーバーライドしています。a 用に別のクラスを作成し、それを定義する必要がありますtext-decoration:none。アラインメントの問題はおそらく同じ問題から発生しています。外側のタグは であるため、css を定義する必要があります。

于 2013-09-27T14:05:54.780 に答える