圓角文本和懸停文本不起作用

Question

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都垂直出現。 如何將其水平放置在屏幕上，並自動將其移至屏幕末端的第二行？
4. 這是最佳做法嗎？ 哪些瀏覽器將無法使用？ 我嘗試了所有最新版本的Safari，Chrome和Firefox。 不確定是否可以在IE8上使用

Answer 1

a：hover覆蓋div：hover，您應該為a創建一個單獨的類，並為此定義text-decoration:none 。 對齊問題可能是同一問題引起的，外部標簽是a，因此您應該為其定義css。

Answer 2

將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/

Answer 3

相反，具有的div的中a ，只是把round類的a ：

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

然后添加.round{display:inline-block;} ，一切.round{display:inline-block;} 。

http://jsfiddle.net/FRz3H/

Answer 4

嘗試將類分配給錨標記而不是div，或創建一個新類並將其分配給文本裝飾的錨標記：將不存在任何文本標記

例：

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

.roundHyperlink
{
   text-decoration:none;
}

希望這個能對您有所幫助...

Answer 5

失去div並將錨點顯示為塊，然后您的問題1＆2就會得到回答：要回答3，請向左添加浮點數。

HTML：

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

CSS：

.round{
    display: block;
    float: left;
    .....
}

另請檢查此演示 。