Question

我有一张桌子，桌子的一边是一系列链接。目前我在悬停时有一个背景颜色更改，使其看起来好像已按下表格中的单元格。这个问题是，在单元格上设置display:block属性后，当单元格悬停在它上面时，会留下圆形边缘并且看起来很糟糕。有什么方法可以解决这个问题？

CSS

.bigtable {

    text-align:left;
    padding:0px 5px 0px 5px;
    color:white;
    border: 2px solid #999999;
    margin:0px 5px 0px 5px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    text-shadow:0 1px 1px white;
    font-size:x-large;
}
td {
    padding: 5px 5px 5px 5px;
    background-color:#0063dc;
    -moz-border-radius:20px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-shadow:0 1px 1px black;


}
td a:hover {
    display:block;  
    background-color:blue;

}

表格摘录：

<table style="width: 100%; height: 730px;" cellspacing="5" cellpadding="5" class="bigtable">
                    <tr>
                                    <td>news</td>
                                    <td><ahref="">click on this box to read about what is 
                                    mmunity</a></td>
                    </tr>
                    <tr>

我知道问题是什么，但我不知道如何解决它。它是td a：hover的一部分CSS就是我正在告诉它的。如何指示悬停链接以更改整个td颜色，而不仅仅是链接部分？

Answer 1

根据规范，这就是CSS3中border-radius的工作原理。框内的内容半径“通过圆角”“流出”。

您还必须为您的链接指定border-radius。

Answer 2

您是否尝试将CSS重新应用于：悬停规则？否则内联块可能会有所帮助。

哪些浏览器会显示此行为？

Answer 3

现代浏览器的快速修复方法是将overflow:hidden应用于具有border-radius的容器：

td {
    padding: 5px 5px 5px 5px;
    background-color:#0063dc;
    -moz-border-radius:20px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-shadow:0 1px 1px black;
    overflow: hidden; /* important bit */
}

这应该剪切链接的角落并保持单元格的圆边。

现在，如果您仍然希望影响链接中的单元格，那么您将不得不使用javascript。根据设计，CSS没有父选择器。

使用CSS3圆角更改悬停背景

3 个答案: