Изменить фон при наведении курсора с помощью закругленных углов CSS3

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>

Я знаю, в чем проблема, но я не знаю, как ее исправить. Это часть CSS, которая делает это, о чем я и говорю. Как я могу дать указание при наведении ссылки изменить ВЕСЬ цвет td, а не только часть ссылки?

Answer 1

Согласно спецификации, именно так работает border-radius в CSS3. Содержимое внутри ящика с радиусом «сливается» через закругленный угол.

Вы также должны дать своим ссылкам border-radius.

Answer 2

Быстрое решение для современных браузеров - применить overflow:hidden к контейнеру с радиусом границы:

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 по своему дизайну лишен родительских селекторов.

Answer 3

Вы пытались повторно применить CSS для правила: hover?Иначе может помочь встроенный блок.

Какие браузеры отображают это поведение?