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;
}

并提出我的问题：

为什么文字装饰不起作用？
文字会在悬停时更改颜色，但不会改变下划线！为什么？
所有div一个接一个地垂直显示。如何将其水平放置在屏幕上并自动将其放到屏幕末端的第二行？
这是最好的做法吗？哪种浏览器不起作用？我尝试了所有最新版本的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。{/ p>

然后添加<a class="round" href="#"><img src="favicon.png" align="center" /><br />Power and Electricity</a>，您就完全了。

http://jsfiddle.net/FRz3H/

Answer 4

尝试将类分配给锚标记而不是div，或者创建一个新类并将其分配给锚标记，其中text-decoration：none将在那里

示例：

<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＆amp; 2被回答：要回答3，请向左添加一个浮点数。

HTML：

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

CSS：

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

同时检查此demo。

圆角文本，悬停不起作用

5 个答案: